frontend-design-quality
Skill1 starsChanged 54 days agoMITView on GitHub
Implement visual frontend work with an intentional design direction: inspect the existing design system and tokens, design mobile and desktop deliberately, implement every state (loading, empty, error, disabled, overflow, permission-denied), protect hierarchy and layout stability, and verify rendered behavior. Always composes with accessibility-quality. Use for UI implementation, styling, layout, and component work.
2 other projects use a version of this.
Adopted by
Most recently taken up by
- AL-JANEF/janefskillsword for word, first seen Sep 19, 2026
- jimtin/production-aitheir own version, first seen Jun 11, 2026
Other versions2 projects use a version of this.
Word for word · 1
- AL-JANEF/janefskills★ 1100% same
Edited · 0
None found.
Wrote their own version · 1
- jimtin/production-ai★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository25 other files it gives its agents.
- janefSkill
- forgeSkill
- accessibility-qualitySkill
- api-contractsSkill
- architecture-integritySkill
- context-efficiencySkill
- database-integritySkill
- delegation-disciplineSkill
- devops-reliabilitySkill
- documentation-integritySkill
- git-disciplineSkill
- implementation-qualitySkill
- performance-scalabilitySkill
- review-defect-firstSkill
- root-cause-debuggingSkill
- testing-verificationSkill
- ui-ux-qualitySkill
- auth-hardeningSkill
- secrets-guardSkill
- security-auditSkill
- security-loggingSkill
- skill-security-auditSkill
- threat-modelSkill
- variant-huntSkill
- vuln-auditSkill
The file
We split this skill into the rules it gives an agent
5 rules. About 0 are common, 2 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 20
Use reusable tokens and components instead of one-off values.
- Distinctive: line 26
Keep server state, URL state, form state, and transient UI state distinct.
- Very specific: line 27
Avoid unsafe HTML injection.
- Very specific: line 35
Use motion to communicate hierarchy or state, never as decoration alone, and respect prefers-reduced-motion.
- Very specific: line 43
Verify rendered behavior, not source alone: mobile and desktop breakpoints, focus states, each implemented state, and the important flows.
≈ “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.
Files
Frontend Design Quality
Inspect before you style. The existing design system, brand, tokens, components, typography, spacing, and interaction patterns are the source of truth; one-off styling is drift.
Direction
- Choose an intentional visual direction appropriate to the product. Avoid generic template aesthetics, decorative noise, and gradients-for-their-own-sake.
- Use reusable tokens and components instead of one-off values. Extend the system deliberately when it genuinely lacks something.
- Design mobile and desktop deliberately rather than compressing a desktop layout. Protect visual hierarchy, readability, contrast, alignment, and layout stability.
Boundaries
- The server is authoritative for permissions and protected data; client checks improve UX, they are not authorization.
- Keep server state, URL state, form state, and transient UI state distinct. Reuse the project's data-fetching and error patterns; do not add a state library for local state without demonstrated cross-component need.
- Avoid unsafe HTML injection; encode for the rendering context and review any sanitizer configuration (
vuln-auditfor anything user-authored).
States
Implement loading, empty, success, stale, error, disabled, read-only, permission-denied, overflow, and long-content states where applicable, before polishing the happy path. Prevent race-driven stale updates with cancellation, request identity, or the framework's data layer.
Motion
Use motion to communicate hierarchy or state, never as decoration alone, and respect prefers-reduced-motion.
Accessibility
Non-negotiable and always composed with this capability: semantic HTML, keyboard order, focus restoration, labels, contrast, zoom, and reflow (accessibility-quality).
Verification
Verify rendered behavior, not source alone: mobile and desktop breakpoints, focus states, each implemented state, and the important flows. Measure bundle or render cost only when the task affects them (performance-scalability).
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
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.