skills.rest
ttakci
ttakciCOMMUNITY
Explore all skills by this author →
GitHub

frontend-rules

Enforces file-organization and design-system rules for React TypeScript frontend code.

Updated Jan 12, 2026
Search Tags:#typescript#react#responsive design#design system#eslint#monorepo#component structure
One-click install
npx skills add https://github.com/ttakci/sellerhill --skill frontend-rules-ttakci
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-rules
Source: https://github.com/ttakci/sellerhill/tree/main/.agents/skills/frontend-rules
Command: npx skills add https://github.com/ttakci/sellerhill --skill frontend-rules-ttakci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents inconsistent component structure, hardcoded styling, and design-system violations when writing or modifying React/TypeScript files in a monorepo frontend. ## Core Features & Use Cases - Mandatory file split: Every feature component is divided into .component.tsx, .container.tsx, .style.ts, and .types.ts with strict rules on what each file may contain. - Design-system enforcement: All colors, spacing, typography, and form controls must come from @repo/ui tokens and atoms — no hardcoded hex values, raw HTML elements, or inline styles. - Mobile and validation rules: Requires responsive behavior down to 360px, submit-attempt-based form validation, and consistent loading/empty states. - Use Case: When adding a new settings page or editing a DataTable in apps/web/src, apply these rules so the code passes ESLint and matches the existing UI conventions. ## Quick Start Apply the frontend-rules skill when creating or modifying any .tsx component under apps/web/src or packages/ui to follow the required file structure and design tokens.

Frequently Asked Questions about frontend-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How should I structure a React feature component in this project?▼

Each feature component splits into four files: a .component.tsx for JSX markup only, a .container.tsx for all hooks and logic, a .style.ts for styled() calls, and a .types.ts for interfaces and enums. Stateful atoms and molecules follow the same split.

How do I style components with the design system tokens?▼

All colors, spacing, shadows, radii, and typography come from the tkn('path') function in @repo/ui. Hardcoded hex values, raw pixel values, and inline style objects are forbidden and enforced by ESLint.

Can I use raw HTML elements like button or input in the frontend?▼

No. Buttons must use the Button or IconButton atoms, text inputs use TextInput with a floating label, selects use Select, and text uses the Text component with variants. Raw HTML form elements are forbidden.

How does required-field validation work in forms?▼

Validation triggers on submit attempt using a submitAttempted boolean, not by disabling the submit button. Error flags are computed in the container and passed to the field atom's error prop, turning invalid fields red after a rejected submit.

What are the mobile responsiveness requirements for new UI?▼

Every new UI must work down to 360px width using tkn('breakpoints.*') instead of hardcoded media queries. Multi-column grids collapse to one column, drawers go full-width below the md breakpoint, and dropdowns render as bottom sheets under 640px.

Which files are exempt from the frontend file-organization rules?▼

Exempt paths include apps/web/src/features/landing, RTK Query endpoint files under api directories, app/store.ts, everything in apps/api, and config files. All other .ts/.tsx files in apps/web/src and packages/ui must follow the rules.

Related Skills

Explore More Software Engineering Skills→
octoploreroctoplorer
5

pnpm

Manage JavaScript dependencies with pnpm workspaces and lockfiles.

Official
Advanced
PrestonigoPrestonigo

design-review

Audit live UI designs for visual inconsistencies and spacing issues.

Community
Intermediate
moking55moking55

map-api-backend-to-fontend

Map backend API endpoints to Next.js frontend hooks and types.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced