|
| 1 | +--- |
| 2 | +name: workflow |
| 3 | +description: > |
| 4 | + Perform any development work on the ambient-ui component. Full |
| 5 | + workflow instructions. |
| 6 | +--- |
| 7 | + |
| 8 | +# Ambient UI Development workflow |
| 9 | + |
| 10 | +Strict workflow execution to be used when performing any ambient-ui component work. |
| 11 | + |
| 12 | +## User Input |
| 13 | + |
| 14 | +```text |
| 15 | +$ARGUMENTS |
| 16 | +``` |
| 17 | + |
| 18 | +## Workflow |
| 19 | + |
| 20 | +### 1. Align with Specs |
| 21 | + |
| 22 | +All work must be aligned with specs. If the user or instructions are asking |
| 23 | +for work to be done without a verified matching section in a spec, STOP. |
| 24 | + |
| 25 | +Before proceeding with implementation, update the relevant spec to match |
| 26 | +the request. |
| 27 | + |
| 28 | +### 2. Perform Test Driven Development |
| 29 | + |
| 30 | +Determine the size of the work. If it is large, break it down into smaller atomic units of work and execute |
| 31 | +this workflow for each one. You can use subagents to handle this gracefully, preserving your context. |
| 32 | + |
| 33 | +Define tests that are relevant and that, when they pass, provide a genuine trust |
| 34 | +that the system is properly implemented in a way that aligns with the spec and the user's intent. |
| 35 | + |
| 36 | +Then, proceed with methodical implementation, breaking work into atomic units of work for subagents |
| 37 | +when possible. Bias towards using subagents for implementation tasks, but ensure they read this workflow skill to understand |
| 38 | +the development standards. |
| 39 | + |
| 40 | +Test and verify implementation before proceeding to the next step. |
| 41 | + |
| 42 | +#### Standards |
| 43 | + |
| 44 | +These standards are to be used during all ambient-ui component development work. |
| 45 | + |
| 46 | +##### Fakes over Mocks |
| 47 | + |
| 48 | +When testing, fakes are to be preferred over mocks. Tests that don't test reality are not tests at all. |
| 49 | + |
| 50 | +##### Accessibility |
| 51 | + |
| 52 | +- For Red Hat assets, small text (17pt or smaller) needs to have a 4.5:1 contrast ratio at minimum. Large text (18pt or larger) and informative graphics like icons need to have a 3:1 contrast ratio at minimum. |
| 53 | +- Saturated hues that are similar in intensity can vibrate when used together, creating fuzziness around the edges like a glowing blur. These colors can be difficult for anyone to look at and distinguish, and even painful for those with vision differences. |
| 54 | + An example of high-contrast colors that do not vibrate. |
| 55 | + |
| 56 | + Do this: Combine bright colors with less saturated and neutral colors. |
| 57 | + Image showing misuse: An example of low-contrast colors that vibrate. |
| 58 | + |
| 59 | + Not this: Don’t use colors with similar intensity in the same area. |
| 60 | + |
| 61 | + |
| 62 | +##### Technology |
| 63 | + |
| 64 | +- React/Next.js |
| 65 | +- shadcn/ui components |
| 66 | + |
| 67 | +##### Colors |
| 68 | + |
| 69 | +Core Palette |
| 70 | + |
| 71 | +| Color Name | HEX Code | RGB | CMYK | Pantone / Notes | |
| 72 | +| :--- | :--- | :--- | :--- | :--- | |
| 73 | +| **red-05** | `#fef0f0` | — | — | — | |
| 74 | +| **red-10** | `#fce3e3` | — | — | — | |
| 75 | +| **red-20** | `#fbc5c5` | — | — | — | |
| 76 | +| **red-30** | `#f9a8a8` | — | — | — | |
| 77 | +| **red-40** | `#f56e6e` | — | — | — | |
| 78 | +| **red-50** | `#ee0000` | 238 0 0 | 0 98 85 0 | Pantone 1788C (Red Hat red) | |
| 79 | +| **red-60** | `#a60000` | — | — | — | |
| 80 | +| **red-70** | `#5f0000` | — | — | — | |
| 81 | +| **red-80** | `#3f0000` | — | — | — | |
| 82 | +| **white** | `#ffffff` | 255 255 255 | 0 0 0 0 | Pantone White | |
| 83 | +| **gray-10** | `#f2f2f2` | — | — | — | |
| 84 | +| **gray-20** | `#e0e0e0` | — | — | — | |
| 85 | +| **gray-30** | `#c7c7c7` | — | — | — | |
| 86 | +| **gray-40** | `#a3a3a3` | — | — | — | |
| 87 | +| **gray-45** | `#8c8c8c` | — | — | — | |
| 88 | +| **gray-50** | `#707070` | — | — | — | |
| 89 | +| **gray-60** | `#4d4d4d` | — | — | — | |
| 90 | +| **gray-70** | `#383838` | — | — | — | |
| 91 | +| **gray-80** | `#292929` | — | — | — | |
| 92 | +| **gray-90** | `#1f1f1f` | — | — | — | |
| 93 | +| **gray-95** | `#151515` | — | — | ux black | |
| 94 | +| **black** | `#000000` | 0 0 0 | 60 40 40 100 | Pantone Black C | |
| 95 | + |
| 96 | +--- |
| 97 | + |
| 98 | +Secondary Palette |
| 99 | + |
| 100 | +| Color Name | HEX Code | RGB | CMYK | Pantone / Notes | |
| 101 | +| :--- | :--- | :--- | :--- | :--- | |
| 102 | +| **orange-10** | `#ffe8cc` | — | — | — | |
| 103 | +| **orange-20** | `#fccb8f` | — | — | — | |
| 104 | +| **orange-30** | `#f8ae54` | — | — | — | |
| 105 | +| **orange-40** | `#f5921b` | 245 146 27 | 0 50 100 0 | Pantone 144C | |
| 106 | +| **orange-50** | `#ca6c0f` | — | — | — | |
| 107 | +| **orange-60** | `#9e4a06` | — | — | — | |
| 108 | +| **orange-70** | `#732e00` | — | — | — | |
| 109 | +| **orange-80** | `#4d1f00` | — | — | — | |
| 110 | +| **yellow-10** | `#fff4cc` | — | — | — | |
| 111 | +| **yellow-20** | `#ffe072` | — | — | — | |
| 112 | +| **yellow-30** | `#ffcc17` | 248 204 23 | 0 15 100 0 | Pantone 108C | |
| 113 | +| **yellow-40** | `#dca614` | — | — | — | |
| 114 | +| **yellow-50** | `#b98412` | — | — | — | |
| 115 | +| **yellow-60** | `#96640f` | — | — | — | |
| 116 | +| **yellow-70** | `#73480b` | — | — | — | |
| 117 | +| **yellow-80** | `#54330b` | — | — | — | |
| 118 | +| **teal-10** | `#daf2f2` | — | — | — | |
| 119 | +| **teal-20** | `#b9e5e5` | — | — | — | |
| 120 | +| **teal-30** | `#9ad8d8` | — | — | — | |
| 121 | +| **teal-40** | `#63bdbd` | — | — | — | |
| 122 | +| **teal-50** | `#37a3a3` | 55 163 163 | 80 10 30 10 | Pantone 2234C | |
| 123 | +| **teal-60** | `#147878` | — | — | — | |
| 124 | +| **teal-70** | `#004d4d` | — | — | — | |
| 125 | +| **teal-80** | `#003333` | — | — | — | |
| 126 | +| **purple-10** | `#ece6ff` | — | — | — | |
| 127 | +| **purple-20** | `#d0c5f4` | — | — | — | |
| 128 | +| **purple-30** | `#b6a6e9` | — | — | — | |
| 129 | +| **purple-40** | `#876fd4` | — | — | — | |
| 130 | +| **purple-50** | `#5e40be` | 94 64 190 | 85 80 0 0 | Pantone 2097C | |
| 131 | +| **purple-60** | `#3d2785` | — | — | — | |
| 132 | +| **purple-70** | `#21134d` | — | — | — | |
| 133 | +| **purple-80** | `#1b0d33` | — | — | — | |
| 134 | + |
| 135 | +> *Note: The "Auxiliary colors" section in your text was empty, so it has been omitted here.* |
| 136 | +
|
| 137 | +--- |
| 138 | + |
| 139 | +Information Palette |
| 140 | +> ⚠️ **Usage Note:** These colors are utilitarian. They should only be used for their intended purposes, not for decorative visuals. |
| 141 | +
|
| 142 | +| Color Name | HEX Code | RGB | CMYK | Pantone / Notes | |
| 143 | +| :--- | :--- | :--- | :--- | :--- | |
| 144 | +| **success-green-10** | `#e9f7df` | — | — | — | |
| 145 | +| **success-green-20** | `#d1f1bb` | — | — | — | |
| 146 | +| **success-green-30** | `#afdc8f` | — | — | — | |
| 147 | +| **success-green-40** | `#87bb62` | — | — | — | |
| 148 | +| **success-green-50** | `#63993d` | 99 153 61 | 70 0 100 10 | Pantone 7737C | |
| 149 | +| **success-green-60** | `#3d7317` | — | — | — | |
| 150 | +| **success-green-70** | `#204d00` | — | — | — | |
| 151 | +| **success-green-80** | `#183301` | — | — | — | |
| 152 | +| **danger-orange-10** | `#ffe3d9` | — | — | — | |
| 153 | +| **danger-orange-20** | `#fbbea8` | — | — | — | |
| 154 | +| **danger-orange-30** | `#f89b78` | — | — | — | |
| 155 | +| **danger-orange-40** | `#f4784a` | — | — | — | |
| 156 | +| **danger-orange-50** | `#f0561d` | 240 86 29 | 0 83 100 0 | Pantone 165C | |
| 157 | +| **danger-orange-60** | `#b1380b` | — | — | — | |
| 158 | +| **danger-orange-70** | `#731f00` | — | — | — | |
| 159 | +| **danger-orange-80** | `#4c1405` | — | — | — | |
| 160 | +| **interaction-blue-10**| `#e0f0ff` | — | — | — | |
| 161 | +| **interaction-blue-20**| `#b9dafc` | — | — | — | |
| 162 | +| **interaction-blue-30**| `#92c5f9` | — | — | — | |
| 163 | +| **interaction-blue-40**| `#4394e5` | — | — | — | |
| 164 | +| **interaction-blue-50**| `#0066cc` | 0 102 204 | 85 55 0 5 | Pantone 2387C | |
| 165 | +| **interaction-blue-60**| `#004d99` | — | — | — | |
| 166 | +| **interaction-blue-70**| `#003366` | — | — | — | |
| 167 | +| **interaction-blue-80**| `#032142` | — | — | — | |
| 168 | + |
| 169 | +**Color Association More info** |
| 170 | +red Red Hat Red is our brand color. Do not use red to represent negative things. |
| 171 | +danger-orange Error, decrease, or failure Something negative has occurred, like a destructive error or a decrease in value. |
| 172 | +orange Caution A non-destructive action or error has occurred. |
| 173 | +yellow Warning Take action now to avoid a destructive action or error. |
| 174 | +success-green Success, increase Something positive has occurred, like a successful action or increase in value. |
| 175 | +teal General or neutral A button or information has no severity. |
| 176 | +interaction-blue Link or interaction Clicking the object or text leads to a hyperlink or state change. |
| 177 | +purple Info or note tip Helpful information is available. |
| 178 | +gray Null A button or information is unavailable or unimportant. |
| 179 | + |
| 180 | + |
| 181 | +##### Typefaces |
| 182 | + |
| 183 | +**Red Hat Text** takes all of the personality from Display and optimizes it for more demanding applications. As the name implies, it’s easier to read in paragraphs or when text is used at small sizes—like in a whitepaper or tooltip. |
| 184 | + |
| 185 | +To increase readability, Text has more height difference between the upper- and lowercase letters, more space between narrow characters, and more variation in letterform stroke weights. |
| 186 | + |
| 187 | +**Red Hat Mono** |
| 188 | + |
| 189 | +Red Hat Mono was created to distinguish code from natural-language text. Mono stands for monospaced, meaning each letter takes up the same amount of horizontal space. This creates neat columns of text and makes scanning code easier. |
| 190 | + |
| 191 | +Mono should only be used when demonstrating code snippets in communications and interfaces, or as a stylistic approach for a more technical audience like the Red Hat Developer Program or the Code Comments podcast. |
| 192 | + |
| 193 | + |
| 194 | +##### General Principles |
| 195 | + |
| 196 | +- Use consistent design tokens |
| 197 | +- Use iconography to improve the user experience and ability to scan the page |
| 198 | +- Everything must be accessible |
| 199 | +- Use reusable components |
| 200 | +- Unless specified by the user, NEVER MAKE CONSIDERATIONS BASED ON A NEED FOR BACKWARDS COMPATIBILITY. |
| 201 | +- Use atomic, conventional commits. |
| 202 | + |
| 203 | +### 3. Perform Critical Review |
| 204 | + |
| 205 | +Launch the following agents in parallel to review and critique your work: |
| 206 | + |
| 207 | +1. Security review agent: |
| 208 | +- Expert in OWASP vulnerability classes |
| 209 | +- Thoroughly vets for supply chain vulnerabilities |
| 210 | + |
| 211 | +2. Spec alignment review agent: |
| 212 | +- Thoroughly review the relevant spec & the implementation. Flags any gaps, no matter how trivial. Spec is the source of truth. |
| 213 | + |
| 214 | +3. Architecture review agent: |
| 215 | +- Identifies architectural inconsistencies, deviations from standards (domain driven design, domain oriented observability, using ports/adapters, etc.) |
| 216 | +- Identifies duplicate code, magic strings/numbers, etc. |
| 217 | + |
| 218 | +4. Code quality agent: |
| 219 | +- Identify lint & formatting issues |
| 220 | +- Identify dead code |
| 221 | + |
| 222 | +5. Documentation sync agent: |
| 223 | +- Ensure relevant README & documentation reflects the changes in this unit of work |
| 224 | +- Do not be overly verbose. Follow any project documentation guidelines, aim for conciseness. Do not over document. |
| 225 | + |
| 226 | +6. UX review agent: |
| 227 | +- Embodies the persona of Steve Krug and the book "Don't Make Me Think" |
| 228 | +- Identifies _anything_ that might make the user think, is poorly organized, doesn't follow principles, etc. |
| 229 | +- Uses playwright to see and interact with the ui to verify & discover all findings. |
| 230 | + |
| 231 | +7. User target demographic review agent: |
| 232 | +- Embodies the persona of an engineer that is using the platform to: |
| 233 | + - Observe units of work, their status, and the overall status of the system (is human intervention necessary etc.) |
| 234 | + - Define and maintain credentials, binding access to projects and specific agents. |
| 235 | +- Exercises the application from end to end, following real user patterns to discover system breaking bugs. |
| 236 | + |
| 237 | +### 4. Address Review Comments |
| 238 | + |
| 239 | +Use subagent(s) to address relevant review comments. Although you are to use your judgement about |
| 240 | +whether a review comment is relevant, you are also to be picky about your work. Take pride in doing |
| 241 | +the correct thing, even if it's not the easiest. |
| 242 | + |
| 243 | +After addressing review comments, loop back to step 3. |
| 244 | + |
| 245 | +If step 3 provides no actionable comments, proceed to the next step. Do not worry if you spend |
| 246 | +many cycles in this stage. Correctness is worth the effort. |
| 247 | + |
| 248 | +### 5. Request User Feedback |
| 249 | + |
| 250 | +Get the UI in a running state so that the user can provide feedback. There are two |
| 251 | +ways for you to do this: |
| 252 | + |
| 253 | +#### Running inside ambient |
| 254 | + |
| 255 | +If you are running within the ambient platform, you will have instructions |
| 256 | +for building images, and deploying to an OpenShift cluster. You should do this, |
| 257 | +create a route, and add the route to the relevant annotation (see your operating instructions.) |
| 258 | + |
| 259 | +#### Running locally |
| 260 | + |
| 261 | +If you are running locally, simply follow the local development setup, and provide |
| 262 | +the user with the URL to open in their browser to provide feedback. Let them know |
| 263 | +what to test and where to look. |
0 commit comments