Will it replace my existing brand?

No. It starts from documented rules, tokens, and repeated patterns in the project. It proposes a new visual direction only when the system is new or you request one.

When implementation is requested and the agent has project access, yes. For a planning request it produces a compact system contract and concrete component example without editing files.

Does it guarantee accessibility?

No. It checks keyboard use, accessible names, focus visibility, contrast, and relevant states when the environment allows, then states what was actually verified.

Frontend UI Design System — Tokens, Components & QA

Example session with this skill installed

Use $frontend-design-system to design a coherent frontend UI system for a fictional local-events site called around. People need to browse nearby events, filter by category, and choose an event. There is no existing brand or component library. Give me a compact system contract, the rules for a representative responsive screen, and the component states I need. An illustrative static preview is enough; do not connect real event data or booking.

Read your context and instructions
Compiled the frontend ui design

Direction

Use a neighborhood-guide feel: editorial headings for discovery, quiet interface text for scanning, and one deep-green action color. Event title, category, time, place, and the next action appear in the same order on every card. All events and places in the preview are illustrative.

System contract

Need	Shared rule	Component behavior	Visible proof
Scan nearby options	One event-information hierarchy and repeated spacing roles	Cards show category, title, time/place, then action	Two different event cards follow the same order
Choose with confidence	One action role, one selected role, visible keyboard focus	Search is primary; filters show selection; disabled and pending actions are distinct	Filter group and button-state strip
Use any screen width	Keep one reading order; change layout, not meaning	Filters stack above results on compact screens and form a side rail on wide screens	390px and 1440px static previews

Reusable rules

Semantic roles in the illustrative preview: ink for headings, action for primary controls, selected for active filters, surface for cards, error for failure messages. A real product should verify the exact color pairs before reuse.
Cards use the same content order and one action label. Filters have an explicit selected treatment; keyboard focus is drawn separately from hover. Component examples show primary, focus, disabled, loading, and error treatments.
The primary journey to verify in an implementation is search/filter → results → event details. Empty results, a long title, a missing image, and a failed search need product-specific content and behavior.

Verification and limits

The illustrative HTML preview was rendered at 390px and 1440px. The 390px document had no horizontal overflow. The pictured controls are static examples; search, filter, booking, keyboard interaction, and state transitions are not connected or verified. No user testing or accessibility certification was performed.

Connects securely to your tools. The creator never sees your data.

About this skill

Turn a new product brief or an inconsistent web app into a coherent frontend design system. The skill connects each design choice to a product need or an existing UI pattern, then carries it through shared rules, component behavior, and representative screens.

Use it to

Define or consolidate semantic color, type, spacing, layout, shape, and motion tokens.
Align reusable buttons, cards, forms, and other components across screens while preserving an established brand.
Specify meaningful variants and applicable hover, focus, disabled, loading, empty, and error states.
Implement a representative slice when code changes are requested, then check affected views at compact and wide sizes.
Report which visual and interaction checks actually ran, and what remains unverified.

The skill is framework independent and makes no network calls or third-party service requests. It works as guidance when you need a system contract, and as an implementation workflow when your agent has access to the project. It does not impose a house aesthetic or claim automatic accessibility certification.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Free forever

No account required to browse

Frontend UI Design System — Tokens, Components & QA