extract-saas-design
Extract SaaS Design
Forensically document the visual system of an implemented SaaS dashboard, admin panel, or internal tool into structured markdown. The output is documentation and resolved tokens, not generated UI code.
When to use this skill
Use when the request matches any of these intents:
- "Extract the design system from this dashboard URL" — live SaaS app, admin panel, or internal tool.
- "Document the design tokens" / "pull the visual system" / "extract the visual DNA" from a codebase, repo, or HTML snapshot.
- "Document color, typography, spacing, radius, shadow tokens" from
globals.css,@theme,tailwind.config.*, or token files. - "Document the sidebar / table / command palette / form layout" — named components from a real implementation.
- "Audit color, spacing, or accessibility consistency" against the implemented system, evidence-based.
- "Capture the dark mode tokens" / "document mode switching" from a working dashboard.
- "Hand off the design system" so another team or codebase can match the existing look.
- "Extract the dashboard's chart palette / density zones / sidebar overrides".
Do NOT use this skill when:
More from yigitkonur/skills-by-yigitkonur
run-research
Use skill if you are answering one technical research question with current web evidence, Reddit practitioner experience, and source-backed synthesis, optionally fanned out across parallel subagents.
42run-agent-browser
Use skill if you are driving the agent-browser CLI for ad hoc browser automation — @ref snapshots, sessions, forms, extraction, screenshots, headed/stealth, or provider runs.
38publish-npm-package
Use skill if you are publishing to npm via GitHub Actions release workflow with trusted publishing, NPM_TOKEN, provenance, semantic-release, changesets, release-please, or fixing npm publish CI.
35init-agent-config
Use skill if you are creating, auditing, or migrating CLAUDE.md, AGENTS.md, or REVIEW.md instruction files, folder-scoped agent guidance, or cross-agent companion entrypoints.
34build-mcp-use-server
Use skill if you are building TypeScript MCP servers with mcp-use/server — server.tool, response helpers, ctx.auth, sessions, transports, widgets, Inspector, deploy.
34build-skills
Use skill if you are creating or substantially revising a Claude skill and need workspace-first evidence, remote comparison, and repo-fit synthesis before writing SKILL.md.
32