Individual skill

frontend-design

Product-specific interface design for an Agent-Native app. Use when creating or changing any user-facing UI, including screenshot feedback, copy or density cleanup, settings, controls, or a visual redesign.

community-templates/demo-clip-library/.agents/skills/frontend-design/SKILL.md

Read pinned source

Source commit ff01b4009091c2140edb34d6f790ec64e7823356

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 2, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 7,643
Repository last updated: Nov 7, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agents Repository topic
ai Repository topic
react Repository topic
agent-native Repository topic
typescript Repository topic
agent-framework Repository topic
agentic-ai Repository topic
ai-agents Repository topic
framework Repository topic
generative-ui Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 4,835 bytes
references/visual-direction.mddoc · 5,473 bytes

Read excerpt


# Frontend Design

Design around the user's task and the app's existing visual language. A
distinctive interface comes from a clear product point of view, not extra
decoration. Keep implementation accessible and responsive.

## Choose a direction

Before a substantial new surface or redesign, decide who is using it, what
they came to do, and what they should see or do next. Pick a visual direction
that fits the product's brand and domain. For routine changes, inspect and
follow the existing components, type, color tokens, and spacing.

If a screen has two unrelated primary jobs, split the workflows or states.