Frontend Design

Source and setup

View GitHub source

anthropics/skillsPinned commit dbd4588f9e1033efb41dad4bef2f7947c8993d44

Choose your tool

Review the skill folder and dependencies at the pinned commit, then place the complete folder in the tool's project skills directory.

  • A coding agent with repository read/write access.
  • A concrete product brief and the project runtime; browser tooling for visual validation.
  • Agent subscription or API usage is separate from the Apache-licensed instructions.
Read upstream setup docs

Installation test pending

Video walkthrough

Keyboard filtering and selection in a sample booking page built with a pinned revision of Frontend Design.

What is frontend-design useful for?

A useful starting point for this frontend design skill is the product brief, not a ready-made visual template. Its workflow asks the agent to establish the subject, audience and main job of the interface before choosing typography, colour and layout.

The source connects these choices to real content and treats borders, numbering and motion as ways to communicate information. It also sets out a cycle of planning, building and critique.

Use it to guide design decisions for a new interface or an existing page; inspect the resulting implementation separately rather than treating a distinctive appearance as proof of usability or improved conversion.

SkillPi original overview · Pinned source for facts

↓ 0 Downloads ↗ 0 Share clicks

From the source

  • Frontend implementation with a coherent visual direction and design rationale.
  • Anthropic describes this repository as educational examples. Browser, accessibility and product acceptance checks remain necessary.
  • Clarify the audience, product context and desired outcome.
  • Choose typography, palette, composition and a distinctive direction.
  • Implement the interface and inspect the rendered result.
  • A coding agent with repository read/write access.
  • A concrete product brief and the project runtime; browser tooling for visual validation.
  • Agent subscription or API usage is separate from the Apache-licensed instructions.

Original SKILL.md

Skillπ does not display the original SKILL.md on this page. View the original source ↗ The source site governs the file contents, license, and use terms.

Current listing version

dbd4588f9e1033efb41dad4bef2f7947c8993d44

Verify the source revision ↗

Permissions and checks before use

Automatically summarized from this main document. Matches may be examples or defensive advice; they are not actual permission declarations. Attachments, external dependencies and runtime behavior are not covered.

The main document is unavailable or exceeds this check’s scope; permissions are unknown.

These notices grant no permissions. Your host tool must still confirm file changes, secrets, external transfers or costs as needed.

Security rating and access scope

unscanned · Static evidence review; not a runtime safety guarantee.

Before use, confirm and authorize actual file access, external services and network destinations in your host. This review grants no runtime permissions.

CONTINUE YOUR WORKFLOW

Read the guide. Then get started.

Selected through explicit skill links and shared collections. Check each listing and its source for requirements.

Related original guides

See all related guides (+10)

Sources and use notice Some skill information on SkillPi comes from public sources or creator submissions. Rights in third-party content belong to their respective owners. Review the source license, required permissions, and usage risks before installing or running a skill.