All authors
Claude Skills by tinh2
github.com/tinh2553 skills8 installs591 views
- Design AmplifyAmplify safe, boring designs into visually confident interfaces. Increases contrast, adds dramatic typography, introduces bold color, and creates visual tension. Makes designs impossible to ignore.Votes: 0GitHub stars: 15
- Design AnimateAdd purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Zero JS animation libraries needed. Supports web and Flutter. Use when: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation', 'page transitions', 'loading animation', 'micro-interactions'.Votes: 0GitHub stars: 15
- Design AuditComprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Produces a prioritized report with severity ratings and fix recommendations. Use when: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'.Votes: 0GitHub stars: 15
- Design BuildBuild distinctive, production-grade interfaces with Ralph Wiggum velocity. Ships working code — web or mobile — with modern CSS, fluid typography, purposeful motion, and zero generic AI aesthetics. Use when: 'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'.Votes: 0GitHub stars: 15
- Design ClaudeHTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, desig...Votes: 0GitHub stars: 15
- Design ColorAdd strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes. Generates harmonious color systems with automatic light/dark variants and accessible contrast ratios.Votes: 0GitHub stars: 15
- Design CopyAutonomous UX copy improvement — rewrites unclear labels, error messages, microcopy, CTAs, tooltips, and onboarding text. Makes every word earn its place. Supports web and mobile.Votes: 0GitHub stars: 15
- Design CritiqueAutonomous design effectiveness evaluation — visual hierarchy, information architecture, emotional resonance, and craft quality. Produces actionable feedback with specific before/after recommendations.Votes: 0GitHub stars: 15
- Design DelightAdd moments of joy — success celebrations, subtle hover reactions, personality in empty states, easter eggs, and contextual surprises. Elevates functional to memorable without being annoying.Votes: 0GitHub stars: 15
- Design HardenMake interfaces bulletproof — error boundaries, loading states, empty states, text overflow, i18n readiness, offline handling, and every edge case that breaks in production. Makes interfaces resilient. Use when: 'harden the UI', 'add error states', 'handle edge cases', 'add loading states', 'make it production ready', 'defensive UI', 'resilient interface'.Votes: 0GitHub stars: 15
- Design NormalizeNormalize a codebase to its design system — replace hardcoded values with tokens, enforce consistent component usage, align spacing/typography/color with the established system. Makes every screen look like it belongs. Use when: 'normalize the UI', 'enforce design system', 'make it consistent', 'align to design tokens', 'unify the design', 'design system compliance', 'style consistency'.Votes: 0GitHub stars: 15
- Design OnboardDesign or improve onboarding flows, empty states, and first-time experiences. Progressive disclosure over feature dumps. Contextual guidance over tutorials. Makes users successful in minutes.Votes: 0GitHub stars: 15
- Design OptimizeAutonomous performance optimization for interfaces — content-visibility, CSS containment, scroll-driven animations replacing JS, view transitions replacing SPA transitions, image optimization, and bundle trimming. Use when: 'optimize UI performance', 'speed up the frontend', 'reduce bundle size', 'improve web vitals', 'optimize rendering', 'make it faster', 'performance audit'.Votes: 0GitHub stars: 15
- Design PolishFinal autonomous quality pass before shipping. Fixes alignment, spacing, consistency, typography hierarchy, color harmony, motion timing, and every micro-detail that separates good from great. The last 10% that takes 90% of the craft. Use when: 'polish the UI', 'make it pixel perfect', 'final design pass', 'fix visual inconsistencies', 'tighten up the design', 'design QA', 'visual cleanup'.Votes: 0GitHub stars: 15
- Design SetupOne-time autonomous design context discovery. Scans the codebase to extract design tokens, typography, colors, spacing, brand patterns, and tech stack, then writes a Design Context section to CLAUDE.md. Zero questions asked. Use when: 'setup design', 'design context', 'design tokens', 'brand discovery', 'design system scan', 'initialize design', 'teach design'.Votes: 0GitHub stars: 15
- Design SimplifyStrip interfaces to their essence — remove unnecessary complexity, reduce visual noise, simplify navigation, and eliminate redundant UI elements. Great design is simple, powerful, and clean.Votes: 0GitHub stars: 15
- Design SystemExtract and formalize a design system from existing UI code. Scans for every hardcoded color, font size, spacing value, border radius, and shadow across the codebase, deduplicates near-identical values, generates framework-appropriate tokens (CSS custom properties, Tailwind config, Flutter ThemeData, SCSS variables), builds a component inventory with token coverage ratings, and replaces all hardcoded values with token references. Use when you need to create design tokens, consolidate inconsis...Votes: 0GitHub stars: 15
- Design TokensExtract, consolidate, and modernize design tokens — oklch color scales, fluid spacing with clamp(), typography scales, motion timing, and shadow depths. Builds a systematic token architecture from scattered values. Use when: 'extract design tokens', 'create design system tokens', 'consolidate styles', 'modernize CSS variables', 'build token system', 'css custom properties', 'theme variables'.Votes: 0GitHub stars: 15
- Design Tone DownReduce visual intensity without losing design quality. Softens aggressive colors, calms excessive animations, balances overwhelming layouts, and restores visual breathing room.Votes: 0GitHub stars: 15
- Game UxAudit game user experience across HUD clarity, menu navigation, tutorial effectiveness, control responsiveness, camera systems, feedback loops, loading screens, and settings completeness. Detects game engine (Unity UGUI/UI Toolkit, Unreal UMG, Godot Control, web-based), maps all UI screens and input contexts, evaluates information hierarchy, visual noise, touch target sizes, menu depth, tutorial pacing, input latency patterns, camera comfort settings, and produces rated findings per category ...Votes: 0GitHub stars: 15
- I18nSet up internationalization by extracting all hardcoded user-facing strings to locale files. Auto-detects framework (Flutter, Next.js, React, Vue, Angular, iOS, Android) and configures the appropriate i18n library (react-intl, next-intl, vue-i18n, flutter_localizations, NSLocalizedString, strings.xml), generates namespaced translation keys with dot notation, handles pluralization via ICU MessageFormat, sets up date/number/currency formatting per locale, adds RTL layout support for Arabic and ...Votes: 0GitHub stars: 15
- Mobile SweepRuntime sweep that catches mobile-layout bugs: content clipped off the edge of a phone screen, touch targets smaller than 44×44px, text inside a button or input that overflows its visible width, and modals that extend past the viewport. Loads the running web app in headless Chromium at 360px / 390px / 768px and reports every offender with a screenshot crop and a concrete fix. TRIGGER whenever the user says any of: "make sure mobile looks good", "check mobile", "mobile sweep", "mobile audit",...Votes: 0GitHub stars: 15
- ResponsiveAudit and fix responsive design issues across all breakpoints. Scans for fixed widths that cause mobile overflow, missing media query variants, non-responsive images, undersized touch targets below 48px, unreadable typography, and horizontal scroll violations. Auto-detects framework (Flutter, Tailwind, React, Vue, Angular) and responsive system, then fixes layouts with proper flex/grid, clamp-based fluid typography, responsive image sizing, and adequate touch target spacing. Verifies every sc...Votes: 0GitHub stars: 15
- Ui CraftPolishes UI primitives one at a time using 2026 research-backed patterns — adds loading/icon states to buttons, replaces inline skeletons with primitives, adds secondary actions to errors, ensures 48px touch targets and visible focus indicators, applies a standard motion token ladder. Use when: 'make the UI feel more polished', 'add attention to detail', 'reduce component duplication', 'tighten the design system', 'apply craft to the frontend'.Votes: 0GitHub stars: 15
- UxDual-mode UX quality skill — runs a heuristic/accessibility/motion audit on the current codebase, or validates implementation against design mockups. Fixes all issues found and commits.Votes: 0GitHub stars: 15
- Codebase MigrationFour-phase skill for planning and executing large-scale codebase migrations using full-context AI analysis. Produces an impact map, ordered batch plan, subagent execution protocol, and cross-codebase validation pass. Optimized for Fable 5's 1M-token context window.Votes: 0GitHub stars: 15
- Deep ResearchRun multi-source web research with adversarial verification and produce a cited report: decomposes the question into 3-6 distinct queries (broad, specific, comparative, recency-anchored), searches and ranks sources by authority, recency, and specificity.Votes: 0GitHub stars: 15
- Gemini Deep ThinkWhole-codebase analysis powered by Gemini 2.5 Pro's 2M token context window. Triggers: bounded per-module analysis misses inter-module patterns or when you need a full-graph view before a major refactor.Votes: 0GitHub stars: 15
- Requirements VerificationAutonomous requirements analysis agent. Parses a spec file (SPEC.md, requirements doc, or any plain-text specification) and runs a structured pass to surface logical contradictions, ambiguous requirements, and underdefined gaps — before any implementation begins.Votes: 0GitHub stars: 15
- Fable 5 Codebase MigrationAutonomous large codebase migration agent optimised for Claude Fable 5 (Mythos class).Votes: 0GitHub stars: 15
- Kiro Spec DrivenSpec-driven development agent for AWS Kiro. Captures feature requirements, generates EARS-notation specifications, produces architectural designs, sequences implementation tasks, and validates the final code against the spec checklist. Use when you want rigorous, maintainable feature builds instead of vibe-coded prototypes.Votes: 0GitHub stars: 15
- Programmatic VideoBuilds programmatic videos (product demos, explainer clips, social videos, launch teasers) with Remotion: verifies node/ffmpeg/Remotion pre-flight, writes a timed storyboard (scene list with durations, on-screen text, and motion notes) as a hard gate before any code.Votes: 0GitHub stars: 15
- Rapid PrototypeTurns an idea into a clickable, verified prototype in one run: ruthlessly scopes to at most 3 screens with one happy path and an explicit written cut-list, scaffolds on the existing repo stack (or Vite standalone), fills it with realistic seed data instead of lorem ipsum.Votes: 0GitHub stars: 15
- Launch KitBuild a complete indie launch package for an app, tool, or library — product audit, positioning (one-liner, value props, objection answers), finished launch assets written to a launch/ directory (landing copy, App Store or Play Store or npm/directory listing text, Product Hunt draft.Votes: 0GitHub stars: 15
- Pre MergeOne-command PR gate that runs four passes over exactly the changed surface — code review (correctness then simplification), security (injection, authz, secrets, dependency diff), tests (run the suite and flag untested changed lines).Votes: 0GitHub stars: 15
- Workflow ConductorConduct a complete feature workflow in one skill — brainstorm, plan, TDD implementation, self-review, delivery summary — with hard gates between stages: no stage starts until the prior stage's artifact exists on disk (brainstorm note, plan doc, green tests per step)..Votes: 0GitHub stars: 15
- Backend SpecGenerates structured engineering specs (backend or frontend) from feature descriptions, designs, or ticket references. Triggers on "spec", "story", "ticket", "engineering spec", "write a story for", "write a spec for", "create a ticket for".Votes: 0GitHub stars: 15
- Claude Code ArtifactsPublishes structured, actionable artifacts from Claude Code sessions — PR walkthroughs, incident timelines, system explainers, release checklists, and security audits.Votes: 0GitHub stars: 15
- Docs To ContextConvert any pile of documents (PDF, Word, HTML pages, wiki exports, PowerPoint slides) into clean, LLM-ready markdown context: inventories the sources, picks the right extractor per file type (pdftotext or PyMuPDF for PDF, pandoc or mammoth for docx, readability extraction for HTML.Votes: 0GitHub stars: 15
- Office SuiteCreates and edits Word (.docx), PowerPoint (.pptx), Excel (.xlsx), and PDF files programmatically: detects the available runtime and picks the right library per format (python-docx or docx.js, python-pptx, openpyxl or exceljs, reportlab or pdf-lib).Votes: 0GitHub stars: 15
- Pitch DeckBuild an investor or product pitch deck as a real PPTX file from a written brief: extracts the fundamentals (problem, solution, market, traction, business model, ask) and flags anything missing as explicit TODO placeholders instead of inventing numbers.Votes: 0GitHub stars: 15
- Repo OnboardingGenerate a new-developer onboarding guide for any repository: detects the stack, entry points, and run/test/deploy commands from package scripts and CI config, maps the architecture of top-level modules, extracts conventions from linter configs and CLAUDE.md.Votes: 0GitHub stars: 15
- Acp Agent SetupConfigure your development environment for Agent Client Protocol (ACP) Spec 1.0 — registers Claude Code, Codex, Devin Local, and OpenCode as ACP peers in Devin Desktop, Zed, or any ACP-compatible editor. Sets default skill loadouts per agent, enables Spaces context sharing, and validates the integration end-to-end.Votes: 0GitHub stars: 15
- Codex BedrockSets up and optimizes OpenAI Codex CLI + GPT-5.5 on Amazon Bedrock (GA June 2026). Handles AWS credential wiring (API key or SDK chain), region selection, VPC endpoint isolation, Responses API migration, IDE integration (VS Code / JetBrains / Xcode), and per-token cost modeling. Run in any repo that uses Codex on AWS.Votes: 0GitHub stars: 15
- Copilot Model RoutingIntelligent task-to-model routing for GitHub Copilot's multi-lab model picker (2026).Votes: 0GitHub stars: 15
- Figma McpConnect the Figma Dev Mode MCP server to your AI coding agent and implement designs against your real component library. Covers MCP setup, Code Connect annotation, design-to-code implementation, and design token sync — all in one autonomous workflow.Votes: 0GitHub stars: 15
- Gemini Cli MigrationMigrate Gemini CLI workflows to a new AI coding tool (Claude Code, Antigravity CLI, or Codex CLI). Triggers: Gemini CLI free-tier access ends June 18 2026 or when switching AI coding CLIs.Votes: 0GitHub stars: 15
- Kiro Custom AgentDesign, configure, and iterate on custom Kiro agents using the 1.0 Markdown agent format. Covers tool-access tags (read | write | shell | web), capability-based permissions.yaml, Natural Language Hooks, and inline MCP server declarations. Produces production-ready .kiro/agents/*.md files ready to commit.Votes: 0GitHub stars: 15
- Kiro Headless CiWire Kiro CLI into CI/CD pipelines using headless mode. Generates GitHub Actions workflows, custom agent definition files, and .kiro/skills/ slash-command skills for automated code review, dependency audits, doc generation, and PR summaries — no browser or interactive terminal required.Votes: 0GitHub stars: 15
- Mcp Apps BuilderBuild MCP Apps — the interactive HTML UI primitive introduced in the 2026-07-28 MCP specification. Scaffolds UI templates, wires the JSON-RPC back-channel, declares tool manifests, and validates against the conformance suite. Use when adding visual interfaces (forms, data previews, approval flows) to an existing MCP server.Votes: 0GitHub stars: 15