Frontend experience core
Ground frontend work in the consuming product and repository, define a concrete contract, and block completion when the result is generic, behaviorally incomplete, or unsupported by evidence.
When to invoke
- "Design this frontend feature from the repository evidence."
- "Implement this screen without making it look generic."
- "Review this UI for complete states and product fit."
- "Plan a web, mobile, PWA, or desktop experience."
- "Route this frontend request to the right specialist."
Evidence and precedence
Use evidence in this order:
- User requirements, approved stories, product documentation, code, tests, schemas, tokens, runtime behavior, and actual assets.
- Applicable normative standards and official platform or framework documentation.
- Properly licensed user-provided references.
- Community guidance only when authoritative evidence is unavailable and clearly labeled.
Read references/product-evidence.md when the product job, local stack, content, states, or supported surfaces are unclear. Unknowns remain unknown; do not invent users, metrics, research, analytics, business rules, or compatibility.
Required design contract
Before a material visual or interaction decision, record:
| Field |
Required decision |
| User and screen job |
Who acts, in what environment, and the outcome they need. |
| Decision sequence |
What must be understood first, second, and third. |
| Actions |
One primary action, justified secondary actions, and access constraints. |
| Product language |
Real nouns, statuses, permissions, units, and content. |
| States |
Applicable loading, empty, partial, error, offline, success, disabled, and permission states. |
| Visual grammar |
Existing tokens, components, density, typography, imagery, and justified additions. |
| Adaptation |
Changes across viewport, input, platform, orientation, locale, zoom, and motion preference. |
| Forbidden defaults |
Generic patterns that would erase product specificity. |
| Acceptance evidence |
Stable IDs and the automated or manual evidence required. |
Start with assets/design-contract.md when the consuming project has no equivalent.
Workflow routing
Load only capabilities that match the task:
| Need |
Skill |
| Stories, criteria, journeys, traceability |
frontend-requirements-and-stories |
| Typography, color, layout, density, motion |
frontend-visual-system |
| Viewports, devices, orientation, input changes |
frontend-responsive-adaptation |
| Dashboards, charts, tables, analytical flows |
frontend-dashboard-visualization |
| Forms, search, filters, uploads, multi-step entry |
frontend-form-interactions |
| Chat, streaming, citations, tools, attachments |
frontend-conversational-ui |
| Public metadata, previews, manifests, icons |
frontend-discoverability-assets |
| Semantic, keyboard, focus, zoom, AT behavior |
frontend-accessibility |
| Test layers, runtime evidence, release verdict |
Relevant frontend testing and release skills |
Finish gate
Read references/anti-generic-interface-gate.md before declaring a material interface complete. Block completion when:
- the interface could belong to an unrelated product after changing the logo;
- hierarchy does not follow the user's decision sequence;
- cards, gradients, oversized text, blur, elevation, or animation replace information architecture;
- visible controls have no implemented result, unavailable state, or explanation;
- important states, access behavior, or recovery are absent;
- responsive behavior only stacks desktop regions;
- a new one-off token or component system conflicts with the established one;
- acceptance criteria lack executed or documented manual evidence.
Use assets/human-review-checklist.md for subjective review. Record pass, needs revision, blocked, or not applicable with evidence for each item.
Limits
- Do not replace product management, user research, branding, backend ownership, legal review, or accessibility certification.
- Do not force a framework, design system, chart library, state library, or testing tool onto an established project.
- Do not copy proprietary screens, assets, text, or exact layouts from references.
- Do not claim product-market fit, conversion, ranking, certification, compatibility, or performance outcomes without evidence.
Output template
## Frontend experience contract
**Status:** ready | needs revision | blocked
**Surface:** web | PWA | mobile | desktop | mixed
### Evidence
| Source | Finding | Confidence |
| --- | --- | --- |
### Contract
| Field | Decision | Evidence |
| --- | --- | --- |
### Applicable skills and gates
- <skill>: <reason>
### Unknowns and blockers
- <fact still needed, owner, and impact>
Quality gate
1---2name: frontend-experience-core3description: Establish product evidence, design contracts, complete UI states, anti-generic interface gates, and routing for frontend work. Use this skill when a material web, PWA, mobile, or desktop design, implementation, or quality request begins, before loading a narrower frontend domain skill.4---56# Frontend experience core78Ground frontend work in the consuming product and repository, define a concrete contract, and block completion when the result is generic, behaviorally incomplete, or unsupported by evidence.910## When to invoke1112- "Design this frontend feature from the repository evidence."13- "Implement this screen without making it look generic."14- "Review this UI for complete states and product fit."15- "Plan a web, mobile, PWA, or desktop experience."16- "Route this frontend request to the right specialist."1718## Evidence and precedence1920Use evidence in this order:21221. User requirements, approved stories, product documentation, code, tests, schemas, tokens, runtime behavior, and actual assets.232. Applicable normative standards and official platform or framework documentation.243. Properly licensed user-provided references.254. Community guidance only when authoritative evidence is unavailable and clearly labeled.2627Read [references/product-evidence.md](references/product-evidence.md) when the product job, local stack, content, states, or supported surfaces are unclear. Unknowns remain unknown; do not invent users, metrics, research, analytics, business rules, or compatibility.2829## Required design contract3031Before a material visual or interaction decision, record:3233| Field | Required decision |34| --- | --- |35| User and screen job | Who acts, in what environment, and the outcome they need. |36| Decision sequence | What must be understood first, second, and third. |37| Actions | One primary action, justified secondary actions, and access constraints. |38| Product language | Real nouns, statuses, permissions, units, and content. |39| States | Applicable loading, empty, partial, error, offline, success, disabled, and permission states. |40| Visual grammar | Existing tokens, components, density, typography, imagery, and justified additions. |41| Adaptation | Changes across viewport, input, platform, orientation, locale, zoom, and motion preference. |42| Forbidden defaults | Generic patterns that would erase product specificity. |43| Acceptance evidence | Stable IDs and the automated or manual evidence required. |4445Start with [assets/design-contract.md](assets/design-contract.md) when the consuming project has no equivalent.4647## Workflow routing4849Load only capabilities that match the task:5051| Need | Skill |52| --- | --- |53| Stories, criteria, journeys, traceability | `frontend-requirements-and-stories` |54| Typography, color, layout, density, motion | `frontend-visual-system` |55| Viewports, devices, orientation, input changes | `frontend-responsive-adaptation` |56| Dashboards, charts, tables, analytical flows | `frontend-dashboard-visualization` |57| Forms, search, filters, uploads, multi-step entry | `frontend-form-interactions` |58| Chat, streaming, citations, tools, attachments | `frontend-conversational-ui` |59| Public metadata, previews, manifests, icons | `frontend-discoverability-assets` |60| Semantic, keyboard, focus, zoom, AT behavior | `frontend-accessibility` |61| Test layers, runtime evidence, release verdict | Relevant frontend testing and release skills |6263## Finish gate6465Read [references/anti-generic-interface-gate.md](references/anti-generic-interface-gate.md) before declaring a material interface complete. Block completion when:6667- the interface could belong to an unrelated product after changing the logo;68- hierarchy does not follow the user's decision sequence;69- cards, gradients, oversized text, blur, elevation, or animation replace information architecture;70- visible controls have no implemented result, unavailable state, or explanation;71- important states, access behavior, or recovery are absent;72- responsive behavior only stacks desktop regions;73- a new one-off token or component system conflicts with the established one;74- acceptance criteria lack executed or documented manual evidence.7576Use [assets/human-review-checklist.md](assets/human-review-checklist.md) for subjective review. Record `pass`, `needs revision`, `blocked`, or `not applicable` with evidence for each item.7778## Limits7980- Do not replace product management, user research, branding, backend ownership, legal review, or accessibility certification.81- Do not force a framework, design system, chart library, state library, or testing tool onto an established project.82- Do not copy proprietary screens, assets, text, or exact layouts from references.83- Do not claim product-market fit, conversion, ranking, certification, compatibility, or performance outcomes without evidence.8485## Output template8687```markdown88## Frontend experience contract89**Status:** ready | needs revision | blocked90**Surface:** web | PWA | mobile | desktop | mixed9192### Evidence93| Source | Finding | Confidence |94| --- | --- | --- |9596### Contract97| Field | Decision | Evidence |98| --- | --- | --- |99100### Applicable skills and gates101- <skill>: <reason>102103### Unknowns and blockers104- <fact still needed, owner, and impact>105```106107## Quality gate108109- [ ] Product and repository evidence was inspected before design or implementation decisions.110- [ ] The design contract names the user, job, hierarchy, actions, states, visual grammar, adaptation, and forbidden defaults.111- [ ] Only relevant domain skills were selected.112- [ ] Unknowns are labeled and no product facts were fabricated.113- [ ] Visible controls and applicable states are complete or explicitly blocked.114- [ ] The anti-generic finish gate has evidence for every applicable item.
workshop-gbb