Extract
educlopez/ui-craft/.codex/skills/extractby educlopezceecc8e1fb0c2befda73da996435900d6dd0c1acNo license375 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 5 weeks ago
Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says "clean this up" / "extract components" / "tokenize styles". Invoke when the user asks for extract on their UI, or mentions 'extract' alongside design / UI / frontend work.
- ceecc8e1fb0c2befda73da996435900d6dd0c1acCurrentcommit ceecc8ePublished Oct 9, 2026
Source and attribution
Source:educlopez/ui-craftin.codex/skills/extractat commitceecc8e
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from educlopez/ui-craft
Unhappy
educlopez
Design pass that inventories and implements non-happy UI states before the happy path.
Tokens
educlopez
Audits or establishes a project's three-layer design token spine for UI work, covering seven token categories.
Typeset
educlopez
Applies a typography pass to a UI: font choice, modular scale, tracking, leading, weight hierarchy and micro-typography.
Sddesign
educlopez
Runs a guided spec-driven UI design pipeline from brief through tokens, spec, build, converge and ship.
Start
educlopez
Read-only front door that inspects a UI project and routes the user to the right ui-craft next step.
Remember
educlopez
Records a learned UI design constraint from a correction into a project brief so future sessions apply it.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.