frontend-design

Frontend Design

This skill is a practical build workflow maintained and adapted by Rylai for Codex, Hermes, and Claude. Its goal is a usable, coherent interface that survives real content, real interaction, and real viewport changes.

Runtime Contract

• Work inside the user's existing repository when one is provided.
• Follow higher-priority project instructions and established design tokens.
• Reuse the installed framework, component library, and icon set when suitable.
• Resolve files relative to this skill or the active project, never a private path from another machine.
• Check tool and package availability before relying on them.
• Use the runtime's browser, screenshot, and image-generation capabilities by their local names.

Required Outcome

A finished interface must:

• perform the requested workflow rather than merely illustrate it;
• preserve or deliberately extend the product's visual language;
• support keyboard, pointer, touch, zoom, and reduced-motion use;
• remain readable from narrow mobile screens through wide desktop screens;
• expose loading, empty, error, disabled, success, and destructive states when the workflow can reach them;
• avoid layout shifts caused by labels, icons, validation text, or late data;
• be verified in a real browser before completion is reported.

Workflow

1. Inspect Before Designing

Read the relevant routes, components, styles, assets, package manifest, and tests. Identify:

• the user and their main task;
• the current navigation and information hierarchy;
• reusable components and tokens;
• framework and build constraints;
• nearby screens that establish product conventions;
• existing user changes that must remain intact.

For a reference image or existing page, separate structural facts from decorative details. Record the important relationships: hierarchy, alignment, density, rhythm, image treatment, interaction priority, and responsive intent.

2. Define the Experience

Write a short internal brief before editing: