Does this skill support Tailwind CSS?

Yes, it supports Tailwind-style utility classes for layout (flex, grid, spacing), but it strictly forbids using raw color classes, requiring they be sourced from a central theme.ts file.

How are API routes handled with this skill?

It mandates a Swagger-first approach where API routes only dispatch calls to a central client (ADR-007), ensuring metadata like expected duration and error codes are always declared.

What is the 'Compact' code principle?

It is a stylistic guideline that prioritizes early returns, conditional rendering with &&, and avoiding intermediate variables to ensure code remains concise and readable.

What are the rules for imports?

The skill prohibits relative paths. All imports must use the '@/' absolute path alias, following a specific hierarchy from React/Next core down to internal types.

Coding Standards & Design System

Name: Coding Standards & Design System
Author: bluefa

bybluefa

0•

Design Tools

Enforces strict coding conventions, design system tokens, and API patterns for high-quality React and Next.js development.

This skill provides a comprehensive framework for maintaining consistency across React and Next.js projects. It automates the application of specific naming conventions, import structures, and type safety rules while strictly enforcing a design system through theme tokens rather than raw CSS classes. Ideal for teams requiring architectural rigor, it also standardizes API route implementations based on Swagger specifications and custom architectural decision records (ADRs), ensuring that Claude generates code that is not only functional but also compliant with production-grade standards and compact coding principles.

Key Features

01Standardized API route patterns following Swagger specifications and ADR-007 dispatch rules.

02Mandatory absolute path mapping (@/) for UI, feature components, hooks, and libraries.

03Strict naming conventions for components, hooks, and utilities using PascalCase and camelCase.

04Type safety enforcement prohibiting 'any' and promoting discriminated unions for provider branching.

05Design system enforcement through theme.ts tokens, prohibiting raw color classes like bg-blue-600.

060 GitHub stars

Use Cases

01Automating code reviews to ensure compact logic and proper directory structuring.

02Enforcing consistent API implementation patterns across a distributed development team.

03Standardizing a large-scale React/Next.js codebase to align with a centralized design system.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bluefa/pii-agent-demo coding-standards

For use in Claude.ai and ChatGPT

Download Skill