frontend-design-guide

Codify React/TypeScript frontend design conventions via GUIDELINES.md.

Updated Jan 6, 2026
One-click install
npx skills add https://github.com/xxziiko/subagent --skill frontend-design-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-guide
Source: https://github.com/xxziiko/subagent/tree/main/.claude/skills/frontend-design-guide
Command: npx skills add https://github.com/xxziiko/subagent --skill frontend-design-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies frontend design conventions to improve readability, predictability, and maintainable code across React/TypeScript projects.

Core Features & Use Cases

  • Readability: Enforces naming, structure, and styles to make code self-explanatory.
  • Predictability & Cohesion: Promotes consistent patterns and modular domain organization.
  • Low Coupling: Advocates composition over excessive prop drilling and premature abstractions.

Quick Start

Apply the Frontend Design Guide to a React/TypeScript project by auditing components against GUIDELINES.md and proposing concrete refactors to align with the guide.

Frequently Asked Questions about frontend-design-guide

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

FAQPage Schema
How do I enforce frontend design standards in a React and TypeScript project?▼

To enforce frontend design standards in React and TypeScript, codify conventions into a GUIDELINES.md file, then audit components during code reviews to ensure cohesion, low coupling, and predictable patterns.

What is the best way to improve React component readability and predictability?▼

Improving React component readability and predictability involves enforcing consistent naming, structure, and styles through document-driven design guidelines applied directly during development workflows.

How do I reduce coupling and excessive prop drilling in React applications?▼

Reduce coupling and excessive prop drilling in React applications by advocating composition over premature abstractions and enforcing modular domain organization through codified design guidelines.

Can I use these frontend design guidelines to audit existing TypeScript codebases?▼

Yes, you can use these frontend design guidelines to audit existing TypeScript codebases by checking components against the defined SKILL.md and GUIDELINES.md files and proposing concrete refactors.

Do I need specific dependencies to codify frontend design conventions?▼

No specific dependencies are required to codify frontend design conventions; the process relies on document-driven requirements within GUIDELINES.md and SKILL.md, leveraging optional references or assets directories when available.