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<!-- Generated from harness/github-copilot/skills/frontend-experience-core/SKILL.md by harness/claude-code/scripts/convert_from_copilot.py. Edit the source, not this file. -->78# Frontend experience core910Ground 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.1112## When to invoke1314- "Design this frontend feature from the repository evidence."15- "Implement this screen without making it look generic."16- "Review this UI for complete states and product fit."17- "Plan a web, mobile, PWA, or desktop experience."18- "Route this frontend request to the right specialist."1920## Evidence and precedence2122Use evidence in this order:23241. User requirements, approved stories, product documentation, code, tests, schemas, tokens, runtime behavior, and actual assets.252. Applicable normative standards and official platform or framework documentation.263. Properly licensed user-provided references.274. Community guidance only when authoritative evidence is unavailable and clearly labeled.2829Read [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.3031## Required design contract3233Before a material visual or interaction decision, record:3435| Field | Required decision |36| --- | --- |37| User and screen job | Who acts, in what environment, and the outcome they need. |38| Decision sequence | What must be understood first, second, and third. |39| Actions | One primary action, justified secondary actions, and access constraints. |40| Product language | Real nouns, statuses, permissions, units, and content. |41| States | Applicable loading, empty, partial, error, offline, success, disabled, and permission states. |42| Visual grammar | Existing tokens, components, density, typography, imagery, and justified additions. |43| Adaptation | Changes across viewport, input, platform, orientation, locale, zoom, and motion preference. |44| Forbidden defaults | Generic patterns that would erase product specificity. |45| Acceptance evidence | Stable IDs and the automated or manual evidence required. |4647Start with [assets/design-contract.md](assets/design-contract.md) when the consuming project has no equivalent.4849## Workflow routing5051Load only capabilities that match the task:5253| Need | Skill |54| --- | --- |55| Stories, criteria, journeys, traceability | `frontend-requirements-and-stories` |56| Typography, color, layout, density, motion | `frontend-visual-system` |57| Viewports, devices, orientation, input changes | `frontend-responsive-adaptation` |58| Dashboards, charts, tables, analytical flows | `frontend-dashboard-visualization` |59| Forms, search, filters, uploads, multi-step entry | `frontend-form-interactions` |60| Chat, streaming, citations, tools, attachments | `frontend-conversational-ui` |61| Public metadata, previews, manifests, icons | `frontend-discoverability-assets` |62| Semantic, keyboard, focus, zoom, AT behavior | `frontend-accessibility` |63| Test layers, runtime evidence, release verdict | Relevant frontend testing and release skills |6465## Finish gate6667Read [references/anti-generic-interface-gate.md](references/anti-generic-interface-gate.md) before declaring a material interface complete. Block completion when:6869- the interface could belong to an unrelated product after changing the logo;70- hierarchy does not follow the user's decision sequence;71- cards, gradients, oversized text, blur, elevation, or animation replace information architecture;72- visible controls have no implemented result, unavailable state, or explanation;73- important states, access behavior, or recovery are absent;74- responsive behavior only stacks desktop regions;75- a new one-off token or component system conflicts with the established one;76- acceptance criteria lack executed or documented manual evidence.7778Use [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.7980## Limits8182- Do not replace product management, user research, branding, backend ownership, legal review, or accessibility certification.83- Do not force a framework, design system, chart library, state library, or testing tool onto an established project.84- Do not copy proprietary screens, assets, text, or exact layouts from references.85- Do not claim product-market fit, conversion, ranking, certification, compatibility, or performance outcomes without evidence.8687## Output template8889```markdown90## Frontend experience contract91**Status:** ready | needs revision | blocked92**Surface:** web | PWA | mobile | desktop | mixed9394### Evidence95| Source | Finding | Confidence |96| --- | --- | --- |9798### Contract99| Field | Decision | Evidence |100| --- | --- | --- |101102### Applicable skills and gates103- <skill>: <reason>104105### Unknowns and blockers106- <fact still needed, owner, and impact>107```108109## Quality gate110111- [ ] Product and repository evidence was inspected before design or implementation decisions.112- [ ] The design contract names the user, job, hierarchy, actions, states, visual grammar, adaptation, and forbidden defaults.113- [ ] Only relevant domain skills were selected.114- [ ] Unknowns are labeled and no product facts were fabricated.115- [ ] Visible controls and applicable states are complete or explicitly blocked.116- [ ] The anti-generic finish gate has evidence for every applicable item.
paulasilvatech