Claude Skills by Manavarya09

```markdown --- name: designlang description: Reverse-engineer any website into a complete design system. Outputs DTCG W3C tokens, motion, anatomy, voice, page intent, material language, plus a single agent-native DESIGN.md and a one-command Next.js clone. Use when the user wants to extract, mirror, or compare design tokens against a live URL. when_to_use: | Use this skill when the user wants to: - Extract design tokens, palette, typography, or shadows from a public website - Generate a DE

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'.

Estimate the cost of a task before starting it. Analyzes task complexity, predicts token usage, and compares cost across all Claude models. Use when user says 'estimate cost', 'how much will this cost', 'cost estimate', or '/cost-estimate'.

Real-time cost tracking and budget management for Claude Code sessions. Shows current spend, burn rate, budget status, per-tool and per-model breakdown. Use when user says 'cost', 'budget', 'spending', 'how much', 'token usage', 'export', or '/cost-guardian'. Subcommands: budget, resume, reset, config, export, status.

Advanced cost intelligence: efficiency scoring, waste detection, ROI metrics, model savings calculator, anomaly detection, and GitHub badge generation. Use when user says 'insights', 'efficiency', 'waste', 'roi', 'savings', 'anomaly', 'badge', or '/cost-insights'.

Generate detailed cost reports with charts and breakdowns. Shows daily/weekly/monthly spend, per-tool costs, per-branch costs, and trends. Use when user says 'cost report', 'spending report', 'usage report', 'show costs', 'branch costs', or '/cost-report'.