agentleFS
workshop-gbbworkshop-gbb/awesome-copilot-adventures/.github/skills/frontend-experience-core/SKILL.md

frontend-experience-core

Skill1 starsChanged 2 months agoMITView on GitHub

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.

1 other project uses a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

10 rules. About 0 are common, 9 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈9

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use evidence in this order:

    line 20
  2. Distinctive:

    Read references/product-evidence.md when the product job, local stack, content, states, or supported surfaces are unclear.

    line 27
  3. Distinctive:

    Before a material visual or interaction decision, record:

    line 31
  4. Distinctive:

    Start with assets/design-contract.md when the consuming project has no equivalent.

    line 45
  5. Distinctive:

    Read references/anti-generic-interface-gate.md before declaring a material interface complete.

    line 65
  6. Very specific:

    Use assets/human-review-checklist.md for subjective review.

    line 76
  7. Distinctive:

    Do not replace product management, user research, branding, backend ownership, legal review, or accessibility certification.

    line 80
  8. Distinctive:

    Do not force a framework, design system, chart library, state library, or testing tool onto an established project.

    line 81
  9. Distinctive:

    Do not copy proprietary screens, assets, text, or exact layouts from references.

    line 82
  10. Distinctive:

    Do not claim product-market fit, conversion, ranking, certification, compatibility, or performance outcomes without evidence.

    line 83

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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:

  1. User requirements, approved stories, product documentation, code, tests, schemas, tokens, runtime behavior, and actual assets.
  2. Applicable normative standards and official platform or framework documentation.
  3. Properly licensed user-provided references.
  4. 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:

FieldRequired decision
User and screen jobWho acts, in what environment, and the outcome they need.
Decision sequenceWhat must be understood first, second, and third.
ActionsOne primary action, justified secondary actions, and access constraints.
Product languageReal nouns, statuses, permissions, units, and content.
StatesApplicable loading, empty, partial, error, offline, success, disabled, and permission states.
Visual grammarExisting tokens, components, density, typography, imagery, and justified additions.
AdaptationChanges across viewport, input, platform, orientation, locale, zoom, and motion preference.
Forbidden defaultsGeneric patterns that would erase product specificity.
Acceptance evidenceStable 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:

NeedSkill
Stories, criteria, journeys, traceabilityfrontend-requirements-and-stories
Typography, color, layout, density, motionfrontend-visual-system
Viewports, devices, orientation, input changesfrontend-responsive-adaptation
Dashboards, charts, tables, analytical flowsfrontend-dashboard-visualization
Forms, search, filters, uploads, multi-step entryfrontend-form-interactions
Chat, streaming, citations, tools, attachmentsfrontend-conversational-ui
Public metadata, previews, manifests, iconsfrontend-discoverability-assets
Semantic, keyboard, focus, zoom, AT behaviorfrontend-accessibility
Test layers, runtime evidence, release verdictRelevant 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

  • Product and repository evidence was inspected before design or implementation decisions.
  • The design contract names the user, job, hierarchy, actions, states, visual grammar, adaptation, and forbidden defaults.
  • Only relevant domain skills were selected.
  • Unknowns are labeled and no product facts were fabricated.
  • Visible controls and applicable states are complete or explicitly blocked.
  • The anti-generic finish gate has evidence for every applicable item.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.