Skip to content
Back to skills

Frontend

ASecurity

Visual design taste for web UI, distilled from a stronger model's aesthetic - invoke when about to BUILD or STYLE any web page, component, artifact, or UI; picking a visual direction; writing CSS; reviewing how a design looks; or when a design works but feels generic or boring. Named style directions with exact tokens, concrete craft numbers, and a catalog of garbage design to refuse.

  • 239 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added September 6, 2026
ai-agentsgoapifrontendbackend

Works with

  • api

Security analysis

A100/100

Pro scans all 6 files and shows the line behind each finding

Scanned September 6, 2026

npx -y skills add telagod/code-abyss --skill frontend --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Frontend?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Frontend
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/telagod-frontend/badge)](https://www.skillsdirectory.com/skills/telagod-frontend)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
user-invocable: false
name: frontend
description: Visual design taste for web UI, distilled from a stronger model's aesthetic - invoke when about to BUILD or STYLE any web page, component, artifact, or UI; picking a visual direction; writing CSS; reviewing how a design looks; or when a design works but feels generic or boring. Named style directions with exact tokens, concrete craft numbers, and a catalog of garbage design to refuse.
---

# Frontend — taste, styles, craft, and what to refuse

Rule content lives in the five files below; this SKILL.md only routes (duplicating rule
text here is drift — `doctrine/04-maintenance.md` governs edits to this bundle too).

## Route by moment

| You are about to… | Read (in this folder) |
|---|---|
| Start any page/component/artifact — brief to shipped | `process.md` first; it routes onward |
| Pick a visual direction, or choose between styles | `styles.md` |
| Understand what makes a design striking vs mediocre; make a boring design memorable | `taste.md` |
| Write actual CSS values — type, space, color, depth, motion, dark mode | `craft.md` |
| Judge a design (yours or anyone's); name precisely why something feels cheap | `garbage.md` |

Start with the ONE file that matches and follow its cross-references — they are required
inputs, not optional reading. Starting from scratch usually means `process.md` + the two
files it points you to.

## Scope and neighbors

This bundle is the **visual/aesthetic layer** only. Server-side design (stack, APIs,
data) → the `backend` bundle; whether to delegate → `doctrine`; how to think → `methods`. If the environment provides an `artifact-design` skill
(harness-side), it calibrates how much to invest per request; THIS bundle governs
direction and craft once you're building.

## The stance

Left unguided, every model produces the same page (`garbage.md` §A names it precisely).
What taste means here — and why a clean-but-forgettable page counts as a failure — is
`taste.md`'s opening; read it before judging any design.

Files in this skill

  • SKILL.md2 KB
  • craft.md7.1 KB
  • garbage.md5.1 KB
  • process.md4.7 KB
  • styles.md6.9 KB
  • taste.md6.1 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…