frontend-development

Original：🇺🇸 English

Translated

Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

6installs

Sourcenicolasances/skills-coding

Added on2026-09-06

NPX Install

npx skill4agent add nicolasances/skills-coding frontend-development

SKILL.md Content

View Translation Comparison →

Frontend Development

Overview

Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."

When to Use

Building new UI components or pages
Modifying existing user-facing interfaces
Implementing responsive layouts
Adding interactivity or state management
Fixing visual or UX issues

Coding Standards

You must always read the frontend coding standards stored in the repo
```
nicolasances/sdlc-agent-specs/coding-standards/frontend-coding-standards.md
```
and you MUST follow these when coding a frontend
[ ] Always use tailwind classes.
[ ] Make sure to use the
```
toto-react
```
library whenever possible. Always check first what the toto-react library provides before implementing from scratch UI components.

Wireframe and design system

If a wireframe or design system exist for the interfaces use it.
If you cannot easily find a wireframe or design system, you need to quit.

Avoid the AI Aesthetic

AI-generated UI has recognizable patterns. AVOID all of them:

AI Default	Why It Is a Problem	Production Quality
Purple/indigo everything	Models default to visually "safe" palettes, making every app look identical	Use the project's actual color palette
Excessive gradients	Gradients add visual noise and clash with most design systems	Flat or subtle gradients matching the design system
Rounded everything (rounded-2xl)	Maximum rounding signals "friendly" but ignores the hierarchy of corner radii in real designs	Consistent border-radius from the design system
Generic hero sections	Template-driven layout with no connection to the actual content or user need	Content-first layouts
Lorem ipsum-style copy	Placeholder text hides layout problems that real content reveals (length, wrapping, overflow)	Realistic placeholder content
Oversized padding everywhere	Equal generous padding destroys visual hierarchy and wastes screen space	Consistent spacing scale
Stock card grids	Uniform grids are a layout shortcut that ignores information priority and scanning patterns	Purpose-driven layouts
Shadow-heavy design	Layered shadows add depth that competes with content and slows rendering on low-end devices	Subtle or no shadows unless the design system specifies

Color

Use semantic color tokens:
```
text-primary
```
,
```
bg-surface
```
,
```
border-default
```
— not raw hex values
Ensure sufficient contrast (4.5:1 for normal text, 3:1 for large text)

Loading and Transitions

Use skeleton shapes to represent loading content — not spinners. Skeleton elements should mirror the dimensions and layout of the real content they stand in for.

Always mark the skeleton container with

aria-busy="true"

and a descriptive

aria-label

for accessibility.

For the skeleton animation itself, use whatever the project already defines (e.g. a custom shimmer class in

globals.css

). Do NOT introduce a new animation class (such as

animate-pulse

) if the project already has one — check

globals.css

and existing components first. Only fall back to a Tailwind utility like

animate-pulse

if no project-level skeleton style exists.

Red Flags

Components with more than 200 lines (split them)
Inline styles or arbitrary pixel values
Missing error states, loading states, or empty states
No keyboard navigation testing
Color as the sole indicator of state (red/green without text or icons)
Generic "AI look" (purple gradients, oversized cards, stock layouts)