10xequity

figma-implement-design

Turn a Figma node into working code in a real codebase â€” the read-from-Figma direction. Use this skill whenever a Figma design is to be implemented, ported, or built as code.

Audit an interface for accessibility — semantic structure, keyboard and focus, contrast, and responsive behavior — and return the corrected code. Use before shipping user-facing UI, when a component must meet WCAG, or when keyboard and screen-reader behavior is unverified.

frontend-design

Commit to an explicit, defensible aesthetic direction before writing UI code, so the result reads as a designed thing rather than a template. Use this skill when building new UI or reshaping existing UI and the visual identity is in play.

mcp-integration

Wire a repository to MCP servers cleanly — scope, credentials, tool surface, and documentation — so the setup is reproducible for everyone on the project. Use when adding an MCP server to a repo, auditing an existing configuration, or deciding between project and user scope.

official-claude-reference

Treat Anthropic's official repositories and docs as the source of truth for Claude Code, skills, plugins, and the API instead of answering from memory. Use whenever a question concerns Claude Code configuration, skill or plugin authoring, model ids, pricing, or SDK behavior.

react-best-practices

Apply React performance rules â€” eliminating request waterfalls, controlling re-renders, virtualizing lists, and loading assets deliberately. Use this skill when a React app is slow, when reviewing a React diff for performance, or when building a data-heavy view.

Code & Development Listed

security-static-analysis

Detect vulnerabilities before commit using CodeQL, Semgrep, and SARIF processing, backed by manual review of the changed surface. Use this skill before merging changes that touch authentication, authorization, user input, file handling, secrets, deserialization, subprocess execution, or dependencies.

Code & Development Listed

visual-direction-review

Critique whether a design holds together — cohesion, hierarchy, rhythm, and emotional consistency — and say whether it reads as intentional. Use when a page technically works but feels generic, incoherent, or off-tone, and when judging a design against its stated direction.

web-design-guidelines

Audit interface code against a concise MUST/SHOULD/NEVER rule set covering interaction, animation, layout, accessibility, performance, and theming. Use this skill as a pre-merge gate on user-facing UI.

website-systems-design

Plan a whole website as a system — page inventory, content model, component library, and navigation — before any page is designed. Use when scoping a marketing site, product site, or multi-page rebuild, or when pages have drifted into inconsistency.

ad-creative

Use when a product or offer needs a polished paid-social or display key visual — hero composition, brand palette, optional headline and CTA — in platform sizes. Triggers on "ad creative", "static ad", "key visual", "Meta or Instagram ad image", "banner", "hero image for the campaign".

animate-product

Use when a still product photo should become a short product video (5–10 s) — a reveal, a hero camera move, light sweeping across the surface, or a 2–3 shot mini-ad. Triggers on "animate this product", "make the photo move", "product video from image", "image to video ad", or "Sora/Runway product clip".

magazine-cover

Use when a person, team, or product should be presented as a magazine cover — masthead, headline, cover lines, barcode, 2:3 portrait — for social posts, player spotlights, sponsor decks, or award graphics. Triggers on "magazine cover", "put them on a cover", "cover story graphic", "issue cover".

product-360-shoot

Use when one product photo must become a full multi-angle still set — front, back, sides, top, three-quarter, and detail shots under consistent lighting — for a product page gallery, marketplace listing, or catalogue. Triggers on "360 shoot", "all angles", "multi-angle set", "product gallery images", "listing photos".

product-explosion

Use when a product photo needs to become a hero "explosion" image — ingredients or parts frozen mid-burst around the product, or an exploded-view teardown with components hovering apart. Triggers on "explosion shot", "exploded view", "ingredients flying", "burst ad", "teardown render", or a request for a dramatic single-frame product hero.

product-spin

Use when a product needs a seamless 360° turntable video — a slow rotating loop for a product page, reel, or hero background. Triggers on "spin", "turntable", "rotating product", "360 video", "spinning loop", or "make it rotate".

ugc-ad

Use when marketing content should look like an ordinary person shot it on a phone — mirror selfie with the product, kitchen-counter demo, unboxing, testimonial frame, or a short vertical clip — rather than polished studio work. Triggers on "UGC", "creator-style", "make it look real, not an ad", "phone-shot", "testimonial video", "authentic".

Data & Documents Listed

write-like-me

Draft text in the user's own voice by building and applying a persisted voice profile learned from their real writing samples. Use this skill when asked to write, draft, ghostwrite, or rewrite something "as me", "in my voice", "how I would say it", or when a draft sounds generic and needs to sound like the user.

code-simplifier

Refine recently written code for clarity, consistency, and maintainability while preserving behaviour exactly. Use this skill immediately after writing or modifying code, and before review.

composition-patterns

Design component APIs around composition â€” compound components, slots, and context â€” to eliminate prop drilling and configuration-object bloat. Use this skill when a component's prop list is growing, when building a reusable component for others, or when a boolean flag is about to be added to control layout.

design-aesthetics-plan

Plan aesthetic direction for websites and product experiences with a unified visual and emotional strategy. Use this skill when defining design direction, mood boards, visual systems, or high-level aesthetic planning.

framer-motion-interactions

Implement interface animation and micro-interactions that feel intentional â€” hover states, layout transitions, page transitions, and spring physics â€” without layout shift or frame drops. Use this skill when writing animation code in a running app.

grill-me

Interrogate requirements with hard technical questions before any code is written, surfacing the decisions that would otherwise be made silently. Use this skill at the start of a new project, feature, or architectural change, especially when the brief is a sentence long.

motion-design

Create and evaluate website motion strategies that improve mood, clarity, and perceived polish. Use this skill when planning animations, micro-interactions, or transitions for websites or product pages.

perplexity-research

Answer a question by searching, reading real sources, and synthesizing a cited brief with an explicit recommendation. Use when a question needs current or external evidence rather than recall, when options must be compared on stated criteria, or when a claim needs verifying against primary sources.

research

Conduct structured research and synthesize findings into a concise, actionable brief. Use this skill when the task requires comparing options, gathering evidence, summarizing external references, or producing a research-backed recommendation.

superpowers-workflow

Run non-trivial engineering work through a structured sequence â€” brainstorm, plan, test-drive, execute, verify, review â€” instead of ad-hoc code generation. Use this skill for multi-file features, refactors, migrations, and hard debugging.

web-landing-page

Plan and improve website landing pages with better structure, clarity, and visual hierarchy. Use this skill when designing or refining landing pages, marketing websites, or homepage sections.