Claude Skills by kettleofketchup

github.com/kettleofketchup

18 skillsA× 180 installs2 views

AestheticACreate aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive ...designgonextjsVotes: 0GitHub stars: 15
Bash ToolsAProper usage of Bash and file operation tools. Use this skill when executing shell commands, writing files, or when tempted to use echo/cat/heredoc to pipe content to files. Prevents permission circumvention patterns like piping multiline content through echo instead of using Write tool. Covers Bash tool, Write tool, Edit tool, and Read tool best practices.toolsshellbashVotes: 0GitHub stars: 15
ReferencesAGuide for extending the bash-tools skill when encountering new issues.documentationbashtestingVotes: 0GitHub stars: 15
BrandADraftForge brand/theming review. Flags raw <button> over PrimaryButton/SecondaryButton, hardcoded violet/slate over brand tokens, inline styles, missing UserAvatar/EntityBreadcrumb.developmenttypescriptpythonVotes: 0GitHub stars: 15
Chrome DevtoolsABrowser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.testingjavascriptgoVotes: 0GitHub stars: 15
Claude CodeAClaude Code is Anthropic's agentic coding tool that lives in the terminal and helps turn ideas into code faster. It combines autonomous planning, execution, and validation with extensibility through skills, plugins, MCP servers, and hooks.ai-agentstypescriptgoVotes: 0GitHub stars: 15
Django Redis CachingADjango Redis caching with django-cacheops. This skill should be used when implementing caching, adding cache invalidation, optimizing API performance, modifying models that affect cached data, or debugging cache-related issues in the Django backend.developmentpythongoVotes: 0GitHub stars: 15
Frontend DevelopmentAFrontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.developmenttypescriptreactVotes: 0GitHub stars: 15
Inv RunnerAPython Invoke task automation for DTX website. This skill should be used when running repo commands, backend tests via Docker, database migrations, updating invoke tasks, Docker operations, or workflow automation. Supports dev/test/prod environments with run, exec, up, down commands. References docs/development/invoke-tasks.md for complete command reference.developmentpythongoVotes: 0GitHub stars: 15
LoggingAStructured logging conventions for DraftForge backend (Django/Celery/Daphne) and frontend (React). This skill should be used when adding log statements, creating new modules, debugging with logs, or reviewing logging patterns. Covers structlog usage, system/subsystem taxonomy, required fields, log levels, and Grafana query patterns.developmentpythongoVotes: 0GitHub stars: 15
Mcp ManagementAManage Model Context Protocol (MCP) servers - discover, analyze, and execute tools/prompts/resources from configured MCP servers. Use when working with MCP integrations, need to discover available MCP capabilities, filter MCP tools for specific tasks, execute MCP tools programmatically, access MCP prompts/resources, or implement MCP client functionality. Supports intelligent tool selection, multi-server management, and context-efficient capability discovery.ai-agentsgobashVotes: 0GitHub stars: 15
Media ProcessingAProcess multimedia files with FFmpeg (video/audio encoding, conversion, streaming, filtering, hardware acceleration) and ImageMagick (image manipulation, format conversion, batch processing, effects, composition). Use when converting media formats, encoding videos with specific codecs (H.264, H.265, VP9), resizing/cropping images, extracting audio from video, applying filters and effects, optimizing file sizes, creating streaming manifests (HLS/DASH), generating thumbnails, batch processing i...documentationgophpVotes: 0GitHub stars: 15
Mermaidjs V11ACreate diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.documentationjavascriptjavaVotes: 0GitHub stars: 15
PrADraftForge PR lifecycle workflow. Use when the user runs /pr, opens or pushes a pull request, or asks to monitor CI checks and Copilot review on a branch. Creates the PR (or reuses an existing one), polls GitHub Actions and Copilot up to ~15 min, then analyses CI failures and Copilot comments and reports findings grouped by file and skill.devopsgobashVotes: 0GitHub stars: 15
Skill CreatorAGuide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.documentationpythongoVotes: 0GitHub stars: 15
TestingADraftForge test infrastructure for writing backend unit tests, Playwright E2E tests, and managing test data population. This skill should be used when writing new tests, adding test fixtures, creating populate functions for new features, adding Playwright E2E specs, using login/auth fixtures, creating test users/orgs/leagues/tournaments, or understanding the test data architecture. Covers backend Django tests via Docker, Playwright config (projects, workers, sharding), test auth endpoints tha...testingpythongoVotes: 0GitHub stars: 15
Ui StylingACreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.developmentjavascripttypescriptVotes: 0GitHub stars: 15
Zod Form ValidationAZod schema validation and React Hook Form integration for TypeScript frontends. This skill should be used when creating forms, defining API schemas, validating form data, implementing type-safe validation, using ZodResolver with React Hook Form, or migrating legacy forms to the Zod + React Hook Form pattern.developmenttypescriptreactVotes: 0GitHub stars: 15