frontend-architecture
Skill23 starsChanged 19 days agoMITView on GitHub
Internal frontend architecture, design, implementation, verification, and audit rules loaded only when an explicitly invoked repository SDD prompt directs the agent to this skill.
We split this skill into the rules it gives an agent
2 rules. 0 are common, 2 are distinctive, and 0 are very specific to this project.
0
Common
Most of the 9 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 19
Use the lowest frontend architecture level that keeps ownership, state, integration, and verification clear.
- Distinctive: line 38
Do not load design rules for dependency-only, build-only, documentation-only, or internal refactoring work that has no user-visible effect.
“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Frontend Architecture
Apply project-specific frontend rules inside the repository's existing two-phase SDD workflow. This skill is a rules layer, not a third workflow or an implementation entry point.
Invocation Gate
Load this skill only when an explicitly invoked repository prompt directs the agent to it. Ordinary discussion, explanation, review, planning, natural-language edit requests, skill-name mentions, and prose approvals must not trigger it.
Core Principles
- Root and module
SPEC.mdfiles are the implementation grounding truth. - Use the lowest frontend architecture level that keeps ownership, state, integration, and verification clear.
- Parent and child specs link across ownership boundaries without copying contracts.
- Vite owns frontend development and production compilation.
- New frontend application modules default to React with TypeScript/TSX unless their confirmed module SPEC records an exception.
- Existing modules keep their confirmed framework and source language until a SPEC update is confirmed. Do not mix an unplanned partial migration into feature work.
- Runtime guidance is repository-local and deterministic. Do not fetch remote skill instructions during execution.
Phase Routing
Load only the references needed for the active SDD phase:
| Phase | References |
| Requirements and design | Architecture levels and, for visible UI changes, design rules |
| SPEC authoring or ownership | Architecture levels and module SPEC template |
| Implementation | Implementation rules |
| Verification | Verification checklist |
| Consolidated project audit | Audit checklist |
Do not load design rules for dependency-only, build-only, documentation-only, or internal refactoring work that has no user-visible effect.
Ownership Rules
- The root frontend workspace owns package management, the lock file, Vite configuration, shared build policy, and child-module navigation.
- Each independently owned frontend application directory has one module
SPEC.md. - Implementation folders such as
components,hooks,styles, andassetsdo not need separate specs unless they become independent ownership boundaries. - Frontend modules consume backend behavior through documented transport contracts. They do not import backend implementation modules.
- Generated assets are build outputs, not authored frontend source or a second ownership surface.
Completion Rule
Frontend work is not complete until the confirmed specs match the implementation, available deterministic checks pass, required browser evidence is collected for visible changes, and the diff passes the frontend SPEC audit.
Other versions11 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 11
- vudovn/ag-kit★ 8.2ksame name
- vudovn/antigravity-kit★ 8.2ksame name
- hushh-labs/hushh-research★ 39same name
- nimadorostkar/Claude-Skills-collection★ 33same name
- stareezy-1/frontend-architecture-skill★ 10same name
- we-are-singular/skills★ 2same name
- yend724/agent-skills★ 2same name
- hemapriyan-rk/claude-rigor-skills★ 1same name
- SWEStash/swe-workflow-skills★ 1same name
- workthanwa-max/SKILLS★ 1same name
1 more not listed
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.
Used alongsideProjects with it also use mobile-design, database-design and 2 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
xenitV1Skillmobile-design
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
Also in 3 projects that use this
harrissohail6Skilldatabase-design
Database schema design and SQL best practices. Use when designing tables, writing queries, or optimizing database performance.
Also in 3 projects that use this
- xenitV1Skill
clean-code
Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments
Also in 3 projects that use this
BlockSkillfrontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Also in 3 projects that use this
In this repository8 other files it gives its agents.
- AGENTS.mdAGENTS.md
- fsq_agent/resources/codex/AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .github/copilot-instructions.mdCopilot instructions
- python-architectureSkill
- requirements-to-designSkill
- spec-drivenSkill
- spec-implementation-auditSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
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.