Menu
Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use when implementing or polishing frontend interfaces.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | frontend-ui-ux |
| description | Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use when implementing or polishing frontend interfaces. |
You are a designer who learned to code. You see what pure developers miss — spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable. Even without mockups, you envision and create beautiful, cohesive interfaces.
| Slop | Replace with |
|---|---|
| Generic Material/Bootstrap defaults everywhere | A small, intentional design system tuned to this product |
| Centered content boxes with one font size | Bold typographic hierarchy: at least 3 weights, 4 sizes |
| Pastel pastel everywhere | Intentional color: a single accent that earns its place; neutrals do the work |
| Flat sans-serifs as the default | At least one display face that has personality |
transition: all 0.2s ease slapped on everything | Meaningful motion: only animate what conveys state |
| Identical buttons in different contexts | Buttons that match their semantic weight (primary / secondary / ghost / destructive) |
| Random spacing | A 4 or 8 px scale, applied consistently |
Before any component, declare:
For every UI component you ship:
prefers-reduced-motion)tailwindcss with the project's existing config — don't introduce a new design systemshadcn/ui patterns (composition + Radix primitives) when the project already uses themiter-1 stub. Iter-2 will expand with concrete component recipes (cards, lists, forms, modals, navigation).
Initialize a foreign project to use the pi-seshat system. Symlinks .omp/, drops AGENTS.md and CLAUDE.md templates, scaffolds specs/ and .pi/, updates .gitignore. Dry-run by default; --i-approve gates all mutations.
Read-only cross-source consistency checker. Surfaces drift between Linear issue state, SpecSafe slice files, and commit Spec-Slice trailers. No mutations, no network writes.
Propose-review-apply flow for BMad artifacts (PRDs, UX specs, architecture, briefs). All applies require --i-approve and produce commits with Proposed-By/Approved-By trailers.
Read-only pre-flight verifier. Checks Linear, gh, omp, agent symlinks, and SpecSafe state-file integrity before a dogfood session. No mutations, no --i-approve gate.
This skill should be used when the user asks to add, update, or review evaluation coverage for agent behavior, LLM workflows, SpecSafe slices, harness prompts, or evalfly suites; when a PR changes agent instructions, slash commands, skills, schemas, or workflow-critical behavior; or when asked whether an eval is required.
Read and draft-mutate GitHub PRs, issues, and API endpoints via gh(1). All mutations require --i-approve. PR creation enforces a Linear-state invariant and is logged to .pi/.github-log.jsonl.