Design Skills

Collaborative UI and visual design skills, with vendored dependencies.

Skills fall into two kinds. Workflows do a job: they run a process end to end and produce an artifact or a verdict. Principles are references: rules and values that other skills load while working, not something you run alone.

Workflows

• design-with-me: collaborative design from a vague idea to HTML wireframes and real component previews, with separate proposal and device switches.
• ui-audit: cross-discipline UI review (clarity, layout, copy, typography, color, polish) that consolidates one ranked verdict.
• change-review: diff/PR-scoped UI review; resolves the change scope and hands findings to ui-audit.
• ui-stress-test: renders one component under every state and scenario on a throwaway page and marks what breaks.
• explain-interface: explains how an effect on someone else's site was built.
• design-dna: extract design DNA from references, then generate a design from the profile.
• animate: build one animation from scratch, decision by decision.
• find-animation-opportunities: sweep an interface for moments that deserve motion and propose exact recipes.
• improve-animations: audit a codebase's motion and produce prioritized implementation plans.
• review-animations: critique animation code against a craft bar.
• animation-vocabulary: reverse-lookup a vague motion description into its exact term.
• text-to-lottie: author Lottie/Bodymovin JSON for the Skia Skottie player from text, SVG, logos, type, loaders, and UI motion.
• humanizer: detect AI writing tells and rewrite published prose (blog, README, LinkedIn) so it reads like a specific person wrote it.
• design-system: three-layer design tokens, component specs, and brand-compliant slide generation.
• pick-ui-library: opinionated library picks for a named frontend task.

Principles

• make-layout-better: grouping, alignment, reading order, disclosure cues, breakpoints, RTL.
• write-usable-copy: verb-first buttons, error phrasing, empty states, voice consistency. Product UI copy; published prose belongs to humanizer.
• make-typography-clean: type scale, line-height, wrapping, truncation, OpenType details.
• color-system: ramps, semantic tokens, contrast measurement.
• ui-polish: concentric radii, elevation, motion values, icon treatment.
• visual-craft: visual direction selection and execution rules (anti-slop, craft checklist, design DNA specs).

Vendored skills

The following skills are vendored verbatim from emilkowalski/skills, pinned as the vendor/emilkowalski-skills submodule and exposed through relative symlinks under skills/:

text-to-lottie is vendored verbatim from diffusionstudio/lottie (skills/text-to-lottie), pinned as the vendor/diffusionstudio-lottie submodule.

humanizer is vendored verbatim from Aboudjem/humanizer-skill (skills/humanizer), pinned as the vendor/humanizer-skill submodule. It rewrites published prose; it does not replace write-usable-copy for product UI strings.

design-system is vendored verbatim from nextlevelbuilder/ui-ux-pro-max-skill (.claude/skills/design-system), pinned as the vendor/ui-ux-pro-max-skill submodule.

The principle skills and ui-audit/change-review are adapted from jakubkrehel/skills, renamed and reorganized for this collection (better-* → the names above; variant folded into design-with-me's wireframe stage; the accessibility domain dropped).

Structure

.claude-plugin/          plugin.json + marketplace.json
plugin.json              portable Agent Plugins manifest (Codex / ChatGPT)
.codex-plugin/plugin.json
.agents/plugins/marketplace.json
skills/
  design-with-me/
  ui-audit/references/clarity.md
  change-review/
  ui-stress-test/
  explain-interface/
  visual-craft/references/
  make-layout-better/
  write-usable-copy/
  make-typography-clean/
  color-system/
  ui-polish/
  pick-ui-library -> ../vendor/emilkowalski-skills/skills/pick-ui-library
  animate -> ../vendor/emilkowalski-skills/skills/animate
  review-animations -> ../vendor/emilkowalski-skills/skills/review-animations
  improve-animations -> ../vendor/emilkowalski-skills/skills/improve-animations
  find-animation-opportunities -> ../vendor/emilkowalski-skills/skills/find-animation-opportunities
  animation-vocabulary -> ../vendor/emilkowalski-skills/skills/animation-vocabulary
  text-to-lottie -> ../vendor/diffusionstudio-lottie/skills/text-to-lottie
  humanizer -> ../vendor/humanizer-skill/skills/humanizer
  design-system -> ../vendor/ui-ux-pro-max-skill/.claude/skills/design-system
  design-dna -> ../vendor/design-dna
vendor/
  design-dna/
  emilkowalski-skills/
  diffusionstudio-lottie/
  humanizer-skill/
  ui-ux-pro-max-skill/

Initialize the dependencies after cloning:

git submodule update --init --recursive

Install as a plugin

This repository is both the skill source and a single plugin named eric-design. Every skill lives at skills/<name>/SKILL.md.

Vendored skills (design-dna, pick-ui-library, the animation set, text-to-lottie, humanizer, and design-system) live in git submodules. Clone or refresh with --recurse-submodules (or run the command above) before expecting those skills to resolve. Marketplace installs that do not initialize submodules will ship those folders empty.

Claude Code

claude plugin marketplace add AkaraChen/eric-design-skill
claude plugin install eric-design@eric-design-skill

Local check without installing:

claude --plugin-dir .

Then invoke a skill as /eric-design:design-with-me. claude plugin validate . checks the marketplace catalog. Runtime discovery of the 21 skills can be inspected with claude --plugin-dir . plugin details eric-design. Validating .claude-plugin/plugin.json warns that vendored skill entries are symlinks; Claude follows those symlinks when the plugin loads.

Codex

codex plugin marketplace add AkaraChen/eric-design-skill
codex plugin add eric-design@eric-design-skill

A checkout of this repo also exposes the plugin through .agents/plugins/marketplace.json. Restart Codex after adding the marketplace, then enable eric-design. Invoke skills as $design-with-me.

Grok Build

grok plugin install AkaraChen/eric-design-skill --trust

All design references and profiles live inside the skills. references/legacy.md preserves the original standalone design notes. UI clarity guidance has one source under ui-audit/references/clarity.md.

visual-craft references the companion eric-frontend skill for implementation conventions and eric-e2e-testing for browser verification. Those remain in eric-way; they are not vendored here.