Frontend Conventions Skill
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend, ensuring agents follow Feature-Sliced Design and use generated OpenAPI types.
The skill focuses on coding conventions and testing rules, with no sensitive data handling, privilege escalation, or external side effects, so risk surface is low. However, there is no explicit user confirmation mechanism, least-privilege description, or data-flow transparency, and the source is unverified, hence deduction.
Rules are clear, but no test cases, edge-case handling, or failure feedback are provided. Key paths depend on external commands (e.g., make generate-api) and local environments, and execution is not verified, introducing uncertainty.
Skill scope is clear (frontend development) with well-defined trigger conditions, but non-fit boundaries are not specified, and the dependency on backend-running OpenAPI generation may affect reachability in mainland-China environments.
Documentation is well-structured with clear layered information and example commands, but lacks versioning, changelog, maintenance responsibility, known limitations, and only declares the Apache-2.0 license.
The skill provides guidelines that could guide frontend development, but its direct utility is unverified; output requires developer judgment and code execution, and marginal value is not proven.
Only source files are available, with no third-party execution evidence or reproducible test data, so verifiability is low.
- This skill provides coding conventions, not sensitive operations, but no permission requirements are stated; ensure least-privilege principles when using.
- The 'make generate-api' command requires the backend to be running; if backend is unavailable, API types cannot be generated—ensure backend is up.
- No versioning or maintenance information is provided; check repository updates before relying on it.
What does this skill do, and when should you use it?
This skill defines a comprehensive set of frontend development standards for the SkillHub repo, covering Feature-Sliced Design layering, data fetching with TanStack Query, state management with Zustand, component composition with Radix UI, styling with Tailwind, and internationalization. It guides developers to place code in appropriate layers, use generated types, and follow build/test workflows via make targets. The skill is part of the SkillHub monorepo which bundles 23 skills, but this profile focuses solely on the frontend-conventions skill.
Reads and applies frontend conventions: checks code placement (pages/features/entities/shared), enforces TanStack Query for server state and discourages useEffect for data fetching, uses Zustand for local state, Radix UI and cva for components, Tailwind and cn() for styling, and i18next for translations. It also defines commands for development, building, type checking, linting, and testing via make. When OpenAPI contracts change, it instructs running make generate-api and committing the generated schema.d.ts, and verifying with check-openapi-generated.sh.
- A developer adding a new page or feature wants to place it in the correct directory and follow existing patterns.
- A developer modifying API calls needs to use openapi-fetch with generated types instead of any.
- A developer needs to decide whether to use TanStack Query or Zustand for a new UI component's state.
- After backend API changes, a developer regenerates TypeScript types and commits them.
- A developer runs build or test commands and needs the exact make targets to pass CI.
What are this skill's strengths and limitations?
- Detailed and actionable, covering layering, data fetching, state, styling, and i18n.
- Tightly coupled to the project's actual dependencies (TanStack Query, Zustand, Radix UI, Tailwind).
- Provides concrete verification commands (typecheck, lint, test) and OpenAPI type consistency checks.
- Apache-2.0 licensed, free to use and modify.
- Only applicable to the SkillHub frontend; requires significant adaptation for other projects.
- Bound to a specific tech stack (React 19, TanStack Router, Vite, etc.), not generic.
- No dedicated test suite validates the skill itself; its effectiveness as a skill is unverified.
- Not listed in major agent platform marketplaces; manual installation required.
How do you install this skill?
The skill is part of the SkillHub repository at .agents/skills/frontend-conventions/SKILL.md. To use it, clone the repo or copy the skill folder into your agent's skills directory (e.g., Claude Code skills). The repo provides a collection; installation typically involves Git clone or downloading the archive. No standalone install command is provided.
How do you use this skill?
Place the skill folder in a directory accessible to your agent, then trigger it when working on React/TypeScript frontend tasks. For example: 'Following the frontend-conventions skill, create a new search feature page.' The skill will guide you on Feature-Sliced Design, TanStack Query, type safety, etc. Ensure you are in the repo root when running make commands like make dev-web or make typecheck-web.