AISKILL-anthropics_skills-FRONTEND-DESIGN

Frontend Design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one — aesthetic direction, typography, layout, and writing that avoid templated defaults.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one — aesthetic direction, typography, layout, and writing that deliberately avoid templated, generic-AI-app defaults, following a brainstorm/explore/plan/critique/build process rather than jumping straight to code.

Reach for this whenever a new UI, landing page, or component needs a genuine design point of view — not a generic Bootstrap-looking default — starting from nothing more than a natural-language design brief.

Pure-instructional: no scripts run, nothing to install. Preserves the original Apache-2.0 license from anthropics/skills unchanged, and carries the same SYSTEM.md external-registry verification as every other package in this ecosystem.

What This Skill Does

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one — aesthetic direction, typography, layout, and writing that avoid templated defaults. Upgraded from a skill originally authored by @anthropics on GitHub — see Origin below for the full provenance trail.

Prerequisites

None — this is a pure-instructional skill. No scripts, no runtime dependencies.

Quick Start

1. Download FRONTEND-DESIGN-1.0.1.aiskill from the Releases page
2. Give your AI agent the skill package and a design brief, e.g.:

Using the Skill Package at /path/to/FRONTEND-DESIGN-1.0.1.aiskill,
design a landing page for a specialty coffee roaster — distinctive, not templated.

Inputs

No structured input file — a design brief in natural language. See SKILL.md for the brainstorm/explore/plan/critique/build process.

Output

Design decisions (palette, typography, layout, signature element) followed by implementation, typically HTML/CSS or a component in the target framework.

Skill Archive Contents

FRONTEND-DESIGN-1.0.1.aiskill  (ZIP archive)
├── manifest.yaml          # identity & metadata
├── SYSTEM.md              # verification protocol (invariant)
├── SKILL.md               # AI entry point — design process & principles
├── README.md              # this file — byte-identical to the repo-root copy
├── CHANGELOG.md           # version history
├── LICENSE.txt            # Apache-2.0 (original author's license, preserved)
└── checksums.yaml         # SHA-256 integrity hashes

Origin

This package is a converted skill — not originally authored for the .aiskill format. Converted per the .aiskill v2.2.0 spec's provenance rules:

• Original repository: anthropics/skills
• Original skill path: skills/frontend-design
• Converted: 2026-07-10
• Original license: Apache-2.0 (preserved unchanged, not re-licensed)

The .aiskill-specific files (manifest.yaml, SYSTEM.md, this README's packaging sections, checksums.yaml) were added during conversion. The skill's actual instructions (SKILL.md) and reference material are the original author's content, unmodified beyond format conversion (YAML frontmatter → manifest.yaml, directory renames per the mapping in manifest.yaml's source_* fields).

Development Workflow

To modify and repackage this skill:

# 1. Clone the source
git clone https://github.com/Xamtastic/AISKILL-anthropics_skills-FRONTEND-DESIGN.git
cd AISKILL-anthropics_skills-FRONTEND-DESIGN

# 2. Edit skill files in skill/
#    - skill/SKILL.md       — execution instructions
#    - skill/assets/        — scripts, references, templates

# 3. Run tests, if any (must pass before packaging)
python3 -m pytest skill/assets/tests/ -v

# 4. Package
python3 skill/assets/scripts/pack.py \
  --skill-dir skill/ \
  --dist-dir dist/

# 5. Bump version in skill/manifest.yaml, update skill/CHANGELOG.md

# 6. Commit, tag, and release
git add -A
git commit -m "feat: FRONTEND-DESIGN v[NEW-VERSION]"
git push origin main
git tag v[NEW-VERSION]
git push origin v[NEW-VERSION]
gh release create v[NEW-VERSION] dist/FRONTEND-DESIGN-[NEW-VERSION].aiskill \
  --title "v[NEW-VERSION]" --notes "..."

Version History

See CHANGELOG.md for the full version history.

License

Apache-2.0 — original license from anthropics/skills, preserved unchanged. See LICENSE.

Contact

Xamtastic For questions or issues with this conversion, open an issue on GitHub. For questions about the original skill content, see the original repository.