blunotech-dev

blunotech-dev/agents

Skill Claude CodeCodex

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

blunotech-dev/agents

Skill Claude CodeCodex

Standardize border radius across all UI elements to ensure consistent curvature. Use when the user asks to fix or unify rounded corners, improve UI consistency, or when a design consistency pass is needed.

blunotech-dev/agents

Skill Claude CodeCodex

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos…

blunotech-dev/agents

Skill Claude CodeCodex

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

blunotech-dev/agents

Skill Claude CodeCodex

Align all spacing (padding, margins, gaps) to a consistent 4pt/8pt grid. Use when spacing feels off, inconsistent, cramped, or unbalanced, or when the user asks for a spacing scale or alignment fix.

blunotech-dev/agents

Skill Claude CodeCodex

Add polished CSS micro-interactions like hover effects, transitions, and feedback states to improve UI feel. Use when the user asks for animations, better UX, or when the interface feels static, plain, or unresponsive.

blunotech-dev/agents

Skill Claude CodeCodex

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

blunotech-dev/agents

Skill Claude CodeCodex

Sort Tailwind CSS utility classes into a clear, consistent order (layout, spacing, sizing, typography, visual). Use when classes are messy, hard to read, or when the user asks to clean up or organize Tailwind code.

blunotech-dev/agents

Skill Claude CodeCodex

Improve typography by adjusting font sizes, weights, spacing, and contrast to create clear visual hierarchy and readability. Use when text feels flat, unstructured, or when the user asks to refine headings, type scale, or overall readability.

blunotech-dev/agents

Skill Claude CodeCodex

Create 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…

blunotech-dev/agents

Skill Claude CodeCodex

Explain complex or legacy code in plain English, including what it does, why it likely exists, and how it can be safely modified or refactored. Use when users paste confusing, messy, undocumented, or inherited code and ask what it does, how to change it, what might break, or request comments/documentation. Outputs a…

blunotech-dev/agents

Skill Claude CodeCodex

Document how data flows through a feature or system from user action to API to state to UI — producing a step-by-step trace and Mermaid diagram. Use whenever a user wants to map, trace, or document data movement - "how does X work end-to-end", "document this feature", "trace what happens when a user does Y", or when…

blunotech-dev/agents

Skill Claude CodeCodex

Design and document a complete Git workflow for a team, including branching strategy, commit conventions, pull request process, merge rules, CI requirements, and release strategy. Use when creating Git workflow docs, CONTRIBUTING guidelines, or defining version control processes for a project.

blunotech-dev/agents

Skill Claude CodeCodex

Generate a clear, structured PR description from a diff, commit list, branch name, or change summary. Use when users want to write or improve a pull request description, fill a PR template, or document code changes for review. Includes what changed, why, testing steps, risks, and follow-ups.

blunotech-dev/agents

Skill Claude CodeCodex

Generate a structured, professional README.md from a project's files, such as file structure, manifests (e.g., package.json), and entry points. Use when users want to create or improve a README, document a project, or explain a codebase. Includes project purpose, tech stack, setup, usage, API/CLI reference…

blunotech-dev/agents

Skill Claude CodeCodex

Generate structured REST API documentation for a set of endpoints. Use when users want API reference docs, endpoint documentation, or descriptions of HTTP routes. Trigger when endpoints, route definitions, controller code, or HTTP methods like GET, POST, PUT, PATCH, or DELETE are provided.

blunotech-dev/agents

Skill Claude CodeCodex

Write a comprehensive test plan for a feature or system. Use when users want to create a test plan, QA strategy, or testing checklist for a feature, bug fix, API, UI component, or release. Trigger when a feature, spec, PRD, or ticket is shared and the user asks what or how to test.

blunotech-dev/agents

Skill Claude CodeCodex

Analyze a component and determine when and how to split it based on size, responsibility, and reuse signals, producing a refactored structure with clear boundaries. Use when users share large, mixed-concern, or hard-to-test components, or ask about splitting, refactoring, or improving component architecture.

blunotech-dev/agents

Skill Claude CodeCodex

Refactor a monolithic UI component into a compound component pattern with a clean consumer API (e.g., ), using React context to share state between subcomponents. Use when users want a composable, prop-light API for complex widgets or mention compound components, headless patterns, or components like Tabs, Accordion…

blunotech-dev/agents

Skill Claude CodeCodex

Identify and fix unnecessary React re-renders caused by Context by splitting providers or memoizing values. Use when users report slow React performance, excessive re-renders, or Context-related lag, or ask how to optimize useContext or large Context providers.

blunotech-dev/agents

Skill Claude CodeCodex

Audit React form components for mixed controlled and uncontrolled inputs and normalize them to a consistent pattern with clear reasoning. Use when users mention controlled vs uncontrolled issues, input warnings, value vs defaultValue conflicts, or ask to review or refactor form code.

blunotech-dev/agents

Skill Claude CodeCodex

Audit a React component tree and classify state as local, shared, or server state, then recommend a refactored structure. Use when users ask about state management, prop drilling, global stores, or where state should live, especially when reviewing component trees or state architecture.

blunotech-dev/agents

Skill Claude CodeCodex

Identify prop drilling in React component trees and refactor it using the most appropriate pattern, such as lifted state, React Context, or component composition. Use when users mention passing props through many layers, prop drilling, or ask to simplify or refactor component communication.

blunotech-dev/agents

Skill Claude CodeCodex

Profile and fix unnecessary React re-renders using memo, useCallback, and useMemo, explaining what changed and why. Use when users report slow React performance, frequent re-renders, laggy UI, or ask how to profile, memoize, or optimize components.