Skill untuk menutup kekuranganmu

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

frontend-design-direction

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

Sumber: affaan-m/ECC/tree/main/skills/frontend-design-direction ↗ · ⭐ Dukung penulis

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).

Sumber: affaan-m/ECC/tree/main/skills/accessibility ↗ · ⭐ Dukung penulis

after-hours-editorial-template

Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transi

agency-grid-layout-minimal

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

analysis

Analyzes a design system from a single URL based on its actual CSS — generates design.md + an HTML report

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns.

Sumber: affaan-m/ECC/tree/main/skills/android-clean-architecture ↗ · ⭐ Dukung penulis

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

Sumber: affaan-m/ECC/tree/main/skills/angular-developer ↗ · ⭐ Dukung penulis

animation-on-scroll

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

animation-systems

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

api-design

REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.

Sumber: affaan-m/ECC/tree/main/skills/api-design ↗ · ⭐ Dukung penulis

apply

Applies an analyzed design.md to your project — pick per category, then inject CSS/Tailwind

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

backend-patterns

Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.

Sumber: affaan-m/ECC/tree/main/skills/backend-patterns ↗ · ⭐ Dukung penulis

beautiful-shadows

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

book-serif-index

Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

brainstorming

Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.

Sumber: obra/superpowers ↗ · ⭐ Dukung penulis

brand-guidelines

Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

brandkit

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

Sumber: Leonxlnx/taste-skill/tree/main/skills/brandkit ↗ · ⭐ Dukung penulis

bright-green-tech-system-webgl

Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

build

Scaffold a new site / deck / card / catalog from design.md (or synthesize on the fly) — insane-build skill router

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

build-mcp-app

This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "app

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

canvas-design

Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

cinematic-gsap-lenis-motion-system

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive lay

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

cinematic-scroll-storytelling

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium edi

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

clinical-research

Use when designing a prospective clinical study before submission — selecting and classifying endpoints (primary / key-secondary / exploratory, with surrogate-endpoint flagging), estimating sample size and power for two-arm designs (means / proportions / survival), or scoring a study plan for feasib

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

commercial-policy

Use when designing or revising a company's commercial policy — the rules of engagement governing discounts off list price, approver thresholds, exception flows, and the deal framework that Deal Desk and AEs operate under. Covers discount matrix design (ARR band x term length x payment terms x strate

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

competitor-alternatives

When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'switch fr

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

competitors

When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'how do we

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

compose-multiplatform-patterns

Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

Sumber: affaan-m/ECC/tree/main/skills/compose-multiplatform-patterns ↗ · ⭐ Dukung penulis

confluence-expert

Atlassian Confluence expert for creating and managing spaces, knowledge bases, and documentation. Configures space permissions and hierarchies, creates page templates with macros, sets up documentation taxonomies, designs page layouts, and manages content governance. Use when users need to build or

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

copywriting

When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

corner-diagonals

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

cro

When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'i

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

css-alpha-masking

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

css-border-gradient

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

daily-ui-inspiration-capture

Create a recurring daily UI inspiration capture. Use when the user asks to run, refresh, package, or validate dated UI inspiration bundles, especially for `articles/YYYY-MM-DD-ui-inspiration-capture/` outputs, Framer/Dribbble landing-page inspiration, motion-study screenshots/videos, AI-builder prom

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

dart-flutter-patterns

Production-ready Dart and Flutter patterns covering null safety, immutable state, async composition, widget architecture, popular state management frameworks (BLoC, Riverpod, Provider), GoRouter navigation, Dio networking, Freezed code generation, and clean architecture.

Sumber: affaan-m/ECC/tree/main/skills/dart-flutter-patterns ↗ · ⭐ Dukung penulis

database-designer

Use when the user asks to design database schemas, plan data migrations, optimize queries, choose between SQL and NoSQL, or model data relationships.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

database-schema-designer

Use when the user asks to create ERD diagrams, normalize database schemas, design table relationships, or plan schema migrations.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

design-brief

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create

design-md

Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.

design-shotgun

Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. Standalone design exploration you can run anytime. Use when: "explore designs", "show me options", "design variants", "visual brainstorm", or "I don't like how this looks". Proact

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Sumber: Leonxlnx/taste-skill/tree/main/skills/taste-skill-v1 ↗ · ⭐ Dukung penulis

dither-background

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overla

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

dither-laser-dark-mode

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

epic-design

Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

export

design.md frontmatter → W3C DTCG tokens.json (Figma Tokens Studio, Style Dictionary, Specify, Cobalt UI 등 8종 호환)

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

Sumber: affaan-m/ECC/tree/main/skills/fal-ai-media ↗ · ⭐ Dukung penulis

field-notes-editorial-template

Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.

figma-generate-design

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

figma-generate-library

Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

figma-use

Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

flutter-animating-apps

Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.

framed-tech-dark-border-gradient

Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

frontend-a11y

Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.

Sumber: affaan-m/ECC/tree/main/skills/frontend-a11y ↗ · ⭐ Dukung penulis

frontend-dev

Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.

Sumber: MiniMax-AI/skills ↗ · ⭐ Dukung penulis

frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Sumber: affaan-m/ECC/tree/main/skills/frontend-patterns ↗ · ⭐ Dukung penulis

frontend-skill

Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.

funky-purple-container-tech

Create a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

gif-sticker-maker

Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Useful for personalized chat stickers and avatar packs.

Sumber: MiniMax-AI/skills ↗ · ⭐ Dukung penulis

glass-dark-mode-clock

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

glass-dark-ui

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

globe-gl

Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

globe-particles

Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not generic starfields or full page layout c

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

gpt-taste

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive sect

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

gsap-core

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gsap-performance

Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gsap-plugins

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animati

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gsap-scrolltrigger

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when n

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gsap-scrolltrigger-storytelling

Build cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

gsap-timeline

Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gsap-utils

Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.

Sumber: greensock/gsap-skills ↗ · ⭐ Dukung penulis

gstack-openclaw-office-hours

Use when asked to brainstorm, evaluate whether an idea is worth building, run office hours, or think through a new product idea or design direction before any code is written.

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

html-to-interaction-prompts

Convert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts. Use when the user provides an HTML file, exported page, generated-page.html, or local/live reference and asks to extract animation/interactions, create prompts,

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

image

When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

image-first-grid-layout

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny co

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

imagegen

Generate and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

imagegen-frontend-mobile

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

Sumber: Leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-mobile ↗ · ⭐ Dukung penulis

imagegen-frontend-web

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

Sumber: Leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-web ↗ · ⭐ Dukung penulis

imagen

Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.

inbox-triage

Runs a full inbox triage using the knowledge base created by the 'inbox-setup' skill. Light-intake by design (most invocations skip questions and run with KB-default preferences); asks at most 2 grill-me override questions when invocation is outside normal cadence or includes category-skip intent. S

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

insane-design

Extracts a deterministic design system from any URL by fetching real CSS, parsing custom properties, and generating a 19-section design.md plus an interactive HTML report. v0.2 writes frontmatter schema_version 3.1 with medium detection (web / slide / design-system / card-news / motion / print). Pai

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

insane-design-apply

Applies an analyzed design.md to an existing project while preserving content. Supports three levels: Lv1 swaps tokens only, Lv2 rewrites styles, Lv3 does a full redesign with BOLD direction commit, Unforgettable signature, and motion level. v0.2 adds persona lock-in (expert designer + user as manag

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

ios-icon-gen

Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects.

Sumber: affaan-m/ECC/tree/main/skills/ios-icon-gen ↗ · ⭐ Dukung penulis

landing

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual pr

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

landing-page

Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

landing-report

Read-only queue dashboard for workspace-aware ship. Shows which VERSION slots are currently claimed by open PRs, which sibling Conductor workspaces have WIP work likely to ship soon, and what slot /ship would pick next. No mutations — just a snapshot. Use when asked to "landing report", "what's in t

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

light-mode-paper-technical

Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

liquid-glass-design

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Sumber: affaan-m/ECC/tree/main/skills/liquid-glass-design ↗ · ⭐ Dukung penulis

make-interfaces-feel-better

Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

Sumber: affaan-m/ECC/tree/main/skills/make-interfaces-feel-better ↗ · ⭐ Dukung penulis

masked-reveal

Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

mcp-server-builder

Design and ship production-ready MCP (Model Context Protocol) servers from OpenAPI contracts instead of hand-written tool wrappers. Python and TypeScript support, schema validation, safe evolution. Use when exposing an existing API as an MCP server, building tool integrations for Claude or Codex or

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

minimax-pdf

Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.

Sumber: MiniMax-AI/skills ↗ · ⭐ Dukung penulis

motion-advanced

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

Sumber: affaan-m/ECC/tree/main/skills/motion-advanced ↗ · ⭐ Dukung penulis

motion-foundations

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this.

Sumber: affaan-m/ECC/tree/main/skills/motion-foundations ↗ · ⭐ Dukung penulis

motion-patterns

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.

Sumber: affaan-m/ECC/tree/main/skills/motion-patterns ↗ · ⭐ Dukung penulis

motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

Sumber: affaan-m/ECC/tree/main/skills/motion-ui ↗ · ⭐ Dukung penulis

nuxt4-patterns

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

Sumber: affaan-m/ECC/tree/main/skills/nuxt4-patterns ↗ · ⭐ Dukung penulis

offers

When the user wants to design, construct, or improve an offer — the thing they actually sell — including value framing, bonus stacking, guarantee design, scarcity/urgency, naming, and payment structure. Also use when the user mentions 'offer,' 'offer design,' 'build an offer,' 'grand slam offer,' 'i

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

office-hours

YC Office Hours — two modes. Startup mode: six forcing questions that expose demand reality, status quo, desperate specificity, narrowest wedge, observation, and future-fit. Builder mode: design thinking brainstorming for side projects, hackathons, learning, and open source. Saves a design doc. Use

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

open-design

Open Design skill suite: 106 design skills + 150 brand design systems for prototyping, image/video generation, decks, and production UI. Includes detailed brand guidelines from Airbnb, Apple, Stripe, Linear, and 140+ more products.

open-design-systems

150 production-grade brand design systems with complete specifications: colors, typography, components, layouts, shadows, and copy-paste prompts. Includes Airbnb, Apple, Stripe, Linear, Notion, Vercel, and 140+ more.

page-cro

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why is

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

paywall-upgrade-cro

Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

pdf

Extract text, create PDFs, and handle forms. Useful for press releases, branded one-pagers, and printable design deliverables.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

platform-design

300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.

pricing-page

Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

pricing-strategist

Use when designing or revisiting product pricing — selecting a pricing model (subscription seat-based, usage-based, value-based, freemium, or hybrid), running Van Westendorp Price Sensitivity Meter analysis on WTP survey data, or designing Good/Better/Best packaging tiers. Recommends a model and a p

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

pricing-strategy

Design, optimize, and communicate SaaS pricing — tier structure, value metrics, pricing pages, and price increase strategy. Use when building a pricing model from scratch, redesigning existing pricing, planning a price increase, or improving a pricing page. Trigger keywords: pricing tiers, pricing p

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

progressive-blur

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

prototype

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Sumber: mattpocock/skills/tree/main/skills/engineering/prototype ↗ · ⭐ Dukung penulis

react-native-patterns

React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.

Sumber: affaan-m/ECC/tree/main/skills/react-native-patterns ↗ · ⭐ Dukung penulis

react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Sumber: affaan-m/ECC/tree/main/skills/react-patterns ↗ · ⭐ Dukung penulis

react-performance

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

Sumber: affaan-m/ECC/tree/main/skills/react-performance ↗ · ⭐ Dukung penulis

referral-program

When the user wants to design, launch, or optimize a referral or affiliate program. Use when they mention 'referral program,' 'affiliate program,' 'word of mouth,' 'refer a friend,' 'incentive program,' 'customer referrals,' 'brand ambassador,' 'partner program,' 'referral link,' or 'growth through

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

remotion-video-creation

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more.

Sumber: affaan-m/ECC/tree/main/skills/remotion-video-creation ↗ · ⭐ Dukung penulis

research-ops-skills

Use when planning, funding, scoping, or synthesizing enterprise research across workstreams — clinical study design, R&D program finance, market sizing/surveys, or product/user research. Triggers on "design this clinical study", "what sample size", "R&D budget", "burn rate", "capitalize or expense",

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

saas-scaffolder

Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

screenshots-marketing

Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.

shader-dev

GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.

Sumber: MiniMax-AI/skills ↗ · ⭐ Dukung penulis

show-me-the-prd

Interview-driven PRD generator for vibe coders — turns one sentence into 4 design documents (PRD, data model, phase separation, project spec) via 5-6 structured questions. Korean triggers: "/show-me-the-prd", "PRD 만들어줘", "기획서 만들어줘", "쇼미더피알디", "앱 기획해줘", "서비스 기획". English triggers: "make PRD", "produc

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

site-architecture

When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL st

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

skeuomorphic-ui

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

slack-gif-creator

Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

slides

Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.

split-layout-technical

Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

staggered-word-reveal

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view de

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

stitched-full-page-capture

Capture or repair reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy web pages. Use when full-page screenshots are blank, gray, white, sparse, show a tiny content strip, disagree with a working scroll video, or when article evidence/section crops m

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

swiftui-patterns

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

Sumber: affaan-m/ECC/tree/main/skills/swiftui-patterns ↗ · ⭐ Dukung penulis

taste

A creative-direction (taste) layer for music videos and short-form edits in the angelcore / cloud-trance / hyperpop visual family. Distills a named-genre aesthetic vocabulary, a mood + color + light system, and a beat-synced editing grammar, then chains ECC's video skills (video-editing, fal-ai-media, remotion-video-creation, motion-*, content-engine) into one production pipeline. Use when the work is not just making a video function but making it feel intentional, when building a music video, a fancam/edit, a moodboard-driven reel, or when choosing a coherent visual direction for AI-generated b-roll.

Sumber: affaan-m/ECC/tree/main/skills/taste ↗ · ⭐ Dukung penulis

tech-green-dark-mode-modern

Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

technical-wireframe-info-layout

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

theme-factory

Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

three-3d-web

Use when building 3D / WebGL / immersive web pages — Three.js, React Three Fiber (R3F), @react-three/drei, GLTF/GLB models, shaders (GLSL), Spline, product configurators, 3D hero sections — including load performance, mobile fallbacks, and reduced-motion. NOT for 2D scroll animation (that is GSAP).

Sumber: x77xdavid-prog/checkup-skills ↗ · ⭐ Dukung penulis

threejs

Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

tour-builder

Designs guided learning tours through codebases, creating 5-15 pedagogical steps that teach project architecture and key concepts in logical order.

Sumber: Lum1104/Understand-Anything ↗ · ⭐ Dukung penulis

ui-design-system

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboratio

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

ui-to-vue

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

Sumber: affaan-m/ECC/tree/main/skills/ui-to-vue ↗ · ⭐ Dukung penulis

understand

Analyze a codebase to produce an interactive knowledge graph for understanding architecture, components, and relationships

Sumber: Lum1104/Understand-Anything ↗ · ⭐ Dukung penulis

understand-diff

Use when you need to analyze git diffs or pull requests to understand what changed, affected components, and risks

Sumber: Lum1104/Understand-Anything ↗ · ⭐ Dukung penulis

unicorn-studio

Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

vantajs

Use when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

video-to-superprompt

Turn a reference video into a super detailed recreation or inspiration prompt. Use when the user provides, mentions, uploads, links, or points to a video and asks to analyze the design, UI, animations, transitions, scroll interactions, typography, colors, assets, WebGL/Three.js, storytelling, sectio

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

vite-patterns

Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.

Sumber: affaan-m/ECC/tree/main/skills/vite-patterns ↗ · ⭐ Dukung penulis

vue-patterns

Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns. Activates for Vue, Nuxt, Vite, or Pinia projects.

Sumber: affaan-m/ECC/tree/main/skills/vue-patterns ↗ · ⭐ Dukung penulis

webgl-3d-object

Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

webgl-landing-steering

Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

webgl-laser

Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

wpds

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

8-bit-orbit-video-template

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

harness-engineering

This skill should be used when designing autonomous agent harnesses: research loops, evaluation scaffolds, locked and editable surfaces, durable logs, novelty gates, pruning, rollback, PR preparation, and human approval boundaries.

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/harness-engineering ↗ · ⭐ Dukung penulis

hosted-agents

This skill should be used when designing hosted or background agent infrastructure: sandboxed execution, remote coding environments, warm pools, session persistence, multiplayer collaboration, self-spawning agents, or Modal-style sandboxes.

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/hosted-agents ↗ · ⭐ Dukung penulis

multi-agent-patterns

This skill should be used when designing multi-agent systems that need context isolation, supervisor or swarm coordination, explicit handoffs, parallel execution, or a decision on whether multiple agents are justified.

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/multi-agent-patterns ↗ · ⭐ Dukung penulis

tool-design

This skill should be used for the tool-interface layer of an agent system specifically: writing tool descriptions agents can route on, designing tool schemas and response formats, naming conventions, actionable error recovery messages, MCP server design, tool-set consolidation, and deciding when to

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/tool-design ↗ · ⭐ Dukung penulis

ab-test-setup

When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "conversion experiment," "statistical significance," or "test this." For trackin

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version

Sumber: coreyhaines31/marketingskills ↗ · ⭐ Dukung penulis

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefe

Sumber: vercel-labs/agent-browser ↗ · ⭐ Dukung penulis

agent-designer

Use when the user asks to design a multi-agent system, pick an orchestration pattern (supervisor/swarm/pipeline), generate tool schemas for agents, or evaluate agent execution logs for cost, latency, and failure bottlenecks. Examples: 'design an agent architecture for research automation', 'generate

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates.

Sumber: affaan-m/ECC/tree/main/skills/agent-harness-construction ↗ · ⭐ Dukung penulis

agent-workflow-designer

Design production-grade multi-agent workflows with clear pattern choice (sequential, parallel, hierarchical), handoff contracts, failure handling, and cost/context controls. Use when architecting a multi-step agent pipeline, choosing between single-agent vs multi-agent approaches, or refactoring an

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

api-design-reviewer

Comprehensive REST API design review with automated linting, breaking-change detection, and design scorecards. Catches inconsistent conventions, missing versioning, and design smells before APIs ship. Use when reviewing a PR that adds or changes API endpoints, auditing an existing API for v2 migrati

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

apple-hig-expert

Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast o

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

aura-asset-images

Use when you need high-quality stock-style images from Aura Assets (aura.build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots. Includes a workflow for searching by tag on aura.build/assets and returns 5 real imag

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

autoplan

Auto-review pipeline — reads the full CEO, design, eng, and DX review skills from disk and runs them sequentially with auto-decisions using 6 decision principles. Surfaces taste decisions (close approaches, borderline scope, codex disagreements) at a final approval gate. One command, fully reviewed

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

aws-solution-architect

Design AWS architectures for startups using serverless patterns and IaC templates. Use when asked to design serverless architecture, create CloudFormation templates, optimize AWS costs, set up CI/CD pipelines, or migrate to AWS. Covers Lambda, API Gateway, DynamoDB, ECS, Aurora, and cost optimizatio

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

azure-cloud-architect

Design Azure architectures for startups and enterprises. Use when asked to design Azure infrastructure, create Bicep/ARM templates, optimize Azure costs, set up Azure DevOps pipelines, or migrate to Azure. Covers AKS, App Service, Azure Functions, Cosmos DB, and cost optimization.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

blue-cloudy-clean-modern

Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

business-operations-skills

Use when running, diagnosing, or designing internal business operations — process documentation, vendor SLAs, capacity planning, internal comms, SOP/runbook authoring, procurement spend. Triggers on "BizOps review", "where's the bottleneck", "vendor health", "internal SOP", "all-hands deck", "spend

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

capacity-planner

Use when an ops leader (Director of CX, Head of Support, VP Ops, Head of BizOps, Head of IT ops, Head of Finance ops) is sizing ops capacity, building a headcount plan, modeling utilization risk, planning Q3 capacity or annual support capacity, or designing CS coverage — and needs Erlang-C queueing

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

chro-advisor

People leadership for scaling companies. Hiring strategy, compensation design, org structure, culture, and retention. Use when building hiring plans, designing comp frameworks, restructuring teams, managing performance, building culture, or when user mentions CHRO, HR, people strategy, talent, headc

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

clean-minimal-beige-light-mode

Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

cmo-advisor

Marketing leadership for scaling companies. Brand positioning, growth model design, marketing budget allocation, and marketing org design. Use when designing brand strategy, selecting growth models (PLG vs sales-led vs community-led), allocating marketing budgets, building marketing teams, or when u

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

codebase-design

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Sumber: mattpocock/skills/tree/main/skills/engineering/codebase-design ↗ · ⭐ Dukung penulis

commercial-skills

Use when reviewing, approving, or designing commercial motion — pricing models, deal review, discount approval, partnership economics, channel mix, commercial policy, RFP/RFI response, bookings forecast. Triggers on "review this deal", "should we discount", "pricing model", "partner economics", "RFP

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

coo-advisor

Operations leadership for scaling companies. Process design, OKR execution, operational cadence, and scaling playbooks. Use when designing operations, setting up OKRs, building processes, scaling teams, analyzing bottlenecks, planning operational cadence, or when user mentions COO, operations, proce

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

cpo-advisor

Product leadership for scaling companies. Product vision, portfolio strategy, product-market fit, and product org design. Use when setting product vision, managing a product portfolio, measuring PMF, designing product teams, prioritizing at the portfolio level, reporting to the board on product, or

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

create-plugin

Guided end-to-end plugin creation workflow with component design, implementation, and validation

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

cro-advisor

Revenue leadership for B2B SaaS companies. Revenue forecasting, sales model design, pricing strategy, net revenue retention, and sales team scaling. Use when designing the revenue engine, setting quotas, modeling NRR, evaluating pricing, building board forecasts, or when user mentions CRO, chief rev

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

dark-blue-contrasting-clean

Create a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

design-consultation

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

design-first-ui-prompting

Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

design-html

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

design-is

Audit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use when the user says "audit this design", "design review", "check this UI against Rams", "is this UI good", "critique this d

Sumber: thedotmack/claude-mem ↗ · ⭐ Dukung penulis

design-review

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before im

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Sumber: affaan-m/ECC/tree/main/skills/design-system ↗ · ⭐ Dukung penulis

django-celery

Django + Celery async task patterns — configuration, task design, beat scheduling, retries, canvas workflows, monitoring, and testing. Use when adding background jobs, scheduled tasks, or async processing to a Django app.

Sumber: affaan-m/ECC/tree/main/skills/django-celery ↗ · ⭐ Dukung penulis

django-patterns

Django architecture patterns, REST API design with DRF, ORM best practices, caching, signals, middleware, and production-grade Django apps.

Sumber: affaan-m/ECC/tree/main/skills/django-patterns ↗ · ⭐ Dukung penulis

docx

Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables.

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

dynamic-workflow-mode

Design task-local harnesses, eval gates, and reusable skill extraction for Claude dynamic workflow mode and other adaptive agent harnesses.

Sumber: affaan-m/ECC/tree/main/skills/dynamic-workflow-mode ↗ · ⭐ Dukung penulis

engineering-advanced-skills

Index of 37 advanced engineering agent skills for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Use when browsing or choosing among the POWERFUL-tier engineering skills: agent design, RAG, MCP servers, CI/CD, database design, observability, security auditing, changelog/release automation, reliab

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

enhance-prompt

Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.

experiment-designer

Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

figma-code-connect-components

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

figma-create-design-system-rules

Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

figma-create-new-file

Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

figma-implement-design

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

gan-style-harness

GAN-inspired Generator-Evaluator agent harness for building high-quality applications autonomously. Based on Anthropic's March 2026 harness design paper.

Sumber: affaan-m/ECC/tree/main/skills/gan-style-harness ↗ · ⭐ Dukung penulis

gcp-cloud-architect

Design GCP architectures for startups and enterprises. Use when asked to design Google Cloud infrastructure, deploy to GKE or Cloud Run, configure BigQuery pipelines, optimize GCP costs, or migrate to GCP. Covers Cloud Run, GKE, Cloud Functions, Cloud SQL, BigQuery, and cost optimization.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

grilling

Grill the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building, or uses any 'grill' trigger phrases.

Sumber: mattpocock/skills/tree/main/skills/productivity/grilling ↗ · ⭐ Dukung penulis

gsd-ai-integration-phase

Generate an AI-SPEC.md design contract for phases that involve building AI systems.

Sumber: gsd-build/get-shit-done ↗ · ⭐ Dukung penulis

gsd-sketch

Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)

Sumber: gsd-build/get-shit-done ↗ · ⭐ Dukung penulis

gsd-ui-phase

Generate UI design contract (UI-SPEC.md) for frontend phases

Sumber: gsd-build/get-shit-done ↗ · ⭐ Dukung penulis

helm-chart-builder

Helm chart development agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw — chart scaffolding, values design, template patterns, dependency management, security hardening, and chart testing. Use when: user wants to create or improve Helm charts, design values.yaml files, imp

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

hexagonal-architecture

Design, implement, and refactor Ports & Adapters systems with clear domain boundaries, dependency inversion, and testable use-case orchestration across TypeScript, Java, Kotlin, and Go services.

Sumber: affaan-m/ECC/tree/main/skills/hexagonal-architecture ↗ · ⭐ Dukung penulis

high-contrast-skeuomorphic-clean

Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

information-security-manager-iso27001

ISO 27001 ISMS implementation and cybersecurity governance for HealthTech and MedTech companies. Use when designing an ISMS, running security risk assessments, implementing controls, pursuing ISO 27001 certification, preparing security audits, responding to security incidents, or verifying complianc

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

insane-design-build

Build a new site, deck, or card from scratch using a design.md brief (or synthesize one on the fly). Pairs with insane-design (analysis) and insane-apply. The build skill writes deterministic HTML+CSS into insane-build/{session}/variations/v{N}/ honoring §18 DON'T grep, AI-slop guards, and persona l

Sumber: fivetaku/gptaku_plugins ↗ · ⭐ Dukung penulis

interview-system-designer

This skill should be used when the user asks to "design interview processes", "create hiring pipelines", "calibrate interview loops", "generate interview questions", "design competency matrices", "analyze interviewer bias", "create scoring rubrics", "build question banks", or "optimize hiring system

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

ios-design-review

Visual design audit for iOS apps on real hardware. Connects to a real iPhone via the same StateServer as /ios-qa, screenshots every screen, evaluates against Apple HIG, DESIGN.md, and design best practices. Scores each dimension 0-10 with "what would make it a 10" framing — mirrors /plan-design-revi

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

iso13485-audit-prep

/cs:iso13485-audit-prep <scope> — ISO 13485 QMS audit 6-question forcing interrogation. Design controls + CAPA + post-market focused. Use before Clause 8.2.4 internal audit, MDR / FDA QSR alignment review, or product-launch DHF closure audit.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

ito-data-atlas-agent

Design background Data Atlas style agents for Itô basket research, market discovery, parameter drafting, and human-in-the-loop editing. Use for architecture and workflow planning, not live order execution.

Sumber: affaan-m/ECC/tree/main/skills/ito-data-atlas-agent ↗ · ⭐ Dukung penulis

jira-expert

Atlassian Jira expert for creating and managing projects, planning, product discovery, JQL queries, workflows, custom fields, automation, reporting, and all Jira features. Use when setting up or configuring Jira projects, writing JQL and advanced searches, creating dashboards, designing workflows, o

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

jpa-patterns

JPA/Hibernate patterns for entity design, relationships, query optimization, transactions, auditing, indexing, pagination, and pooling in Spring Boot.

Sumber: affaan-m/ECC/tree/main/skills/jpa-patterns ↗ · ⭐ Dukung penulis

kubernetes-operator

Use when building a Kubernetes Operator — custom controllers that reconcile CRD state. Triggers on "build an operator", "CRD design", "reconcile loop", "controller-runtime", "kubebuilder", "operator-sdk", "metacontroller", "KOPF", "operator capability levels", or "custom resource". Ships CRD validat

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

loop-design-check

Design a goal-oriented agent loop, and review it for the ways loops go wrong — spinning and burning tokens, Goodhart-gaming the verifier, or running a wrong answer to completion. Two actions: (1) WRITE a loop — gate whether to build it, define a machine-decidable goal, pick the loop type, pick a skeleton; (2) REVIEW a loop — run it past five failure modes plus decidability, boundaries, fallback, judge independence, and keep-judgment-with-the-human red lines. Use when designing an autonomous agent loop, or when you already have one and worry it will spin, cheat, or run a wrong answer to the end. Complements the mechanism-layer loop skills (autonomous-loops, continuous-agent-loop) by covering the judgment layer they don't. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。English triggers: design an agent loop, write a loop, check a loop, loop review, prevent a runaway loop, goal-oriented loop, decidable goal, plan/build/judge.

Sumber: affaan-m/ECC/tree/main/skills/loop-design-check ↗ · ⭐ Dukung penulis

loop-library

Discover, find, compare, audit, repair, adapt, and design repeatable AI-agent loops with explicit triggers, actions, verification, stopping conditions, guardrails, and handoffs. Use when a user asks to analyze a codebase for potential loops, mine coding-thread history for work done more than once, t

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

md-document

Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. Triggers when the markdown-html-orchestrator classifies an input as DOCUMEN

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

mesh-gradient-dark-blue-clean

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure,

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

modernize-reimagine

Multi-agent greenfield rebuild — extract specs from legacy, design AI-native, scaffold & validate with HITL

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

nested-container-clean-agency

Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

observability-designer

Design production-ready observability strategies combining metrics, logs, and traces. Includes SLI/SLO design, golden-signals monitoring, alert optimization. Use when adding observability to a new service, refactoring alerting that is too noisy, or designing an SLO program before scaling production

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

orange-clean-paper-saas

Create a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

orch-build-mvp

Orchestrate bootstrapping a working MVP from a design or spec document — ingest the doc, plan thin vertical slices, scaffold the first end-to-end slice, then TDD-implement, review, and gated commit. Use to turn an SDD/PRD into a running starting point.

Sumber: affaan-m/ECC/tree/main/skills/orch-build-mvp ↗ · ⭐ Dukung penulis

plan-design-review

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode. For live site visual audits, use /design-review. Use when asked to "review the design plan" or "design critique

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

plan-devex-review

Interactive developer experience plan review. Explores developer personas, benchmarks against competitors, designs magical moments, and traces friction points before scoring. Three modes: DX EXPANSION (competitive advantage), DX POLISH (bulletproof every touchpoint), DX TRIAGE (critical gaps only).

Sumber: garrytan/gstack ↗ · ⭐ Dukung penulis

plan-orchestrate

Read a plan document, decompose it into steps, design a per-step agent chain from the ECC catalogue, and emit ready-to-paste /orchestrate custom prompts. Generative only — never invokes /orchestrate itself. Use when the user has a multi-step plan and wants to drive it through orchestrate without composing chains by hand.

Sumber: affaan-m/ECC/tree/main/skills/plan-orchestrate ↗ · ⭐ Dukung penulis

postgres-patterns

PostgreSQL database patterns for query optimization, schema design, indexing, and security. Based on Supabase best practices.

Sumber: affaan-m/ECC/tree/main/skills/postgres-patterns ↗ · ⭐ Dukung penulis

prisma-patterns

Prisma ORM patterns for TypeScript backends — schema design, query optimization, transactions, pagination, and critical traps like updateMany returning count not records, $transaction timeouts, migrate dev resetting the DB, @updatedAt skipped on bulk writes, and serverless connection exhaustion.

Sumber: affaan-m/ECC/tree/main/skills/prisma-patterns ↗ · ⭐ Dukung penulis

product-skills

Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, co

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

quality-manager-qms-iso13485

ISO 13485 Quality Management System implementation and maintenance for medical device organizations. Provides QMS design, documentation control, internal auditing, CAPA management, and certification support. Use when working with medical device quality systems, preparing for ISO 13485 audits, managi

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

quarkus-patterns

Quarkus 3.x LTS architecture patterns with Camel for messaging, RESTful API design, CDI services, data access with Panache, and async processing. Use for Java Quarkus backend work with event-driven architectures.

Sumber: affaan-m/ECC/tree/main/skills/quarkus-patterns ↗ · ⭐ Dukung penulis

rag-architect

Use when the user asks to design a RAG pipeline, choose a chunking strategy or embedding model, pick a vector database, or evaluate retrieval quality (precision@k, recall@k, NDCG). Examples: 'design a RAG system for our docs', 'what chunk size should I use for this corpus', 'evaluate my retriever ag

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

recsys-pipeline-architect

Design composable recommendation, ranking, and feed pipelines using the six-stage Source→Hydrator→Filter→Scorer→Selector→SideEffect framework popularized by xAI's open-sourced For You algorithm. Use this skill whenever the user is building any system that picks "the top K items for a (user, context)" — social feeds, content CMSs, RAG rerankers, task prioritizers, notification triage, search reranking, ad ranking.

Sumber: affaan-m/ECC/tree/main/skills/recsys-pipeline-architect ↗ · ⭐ Dukung penulis

redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

screenshot

Capture desktop, app windows, or pixel regions across OS platforms. Useful for marketing screenshots, design reviews, and bug reports.

Sumber: openai/skills ↗ · ⭐ Dukung penulis

senior-architect

This skill should be used when the user asks to "design system architecture", "evaluate microservices vs monolith", "create architecture diagrams", "analyze dependencies", "choose a database", "plan for scalability", "make technical decisions", or "review system design". Use for architecture decisio

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

senior-backend

Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set u

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

senior-data-engineer

Data engineering skill for building scalable data pipelines, ETL/ELT systems, and data infrastructure. Expertise in Python, SQL, Spark, Airflow, dbt, Kafka, and modern data stack. Includes data modeling, pipeline orchestration, data quality, and DataOps. Use when designing data architectures, buildi

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

senior-data-scientist

World-class senior data scientist skill specialising in statistical modeling, experiment design, causal inference, and predictive analytics. Covers A/B testing (sample sizing, two-proportion z-tests, Bonferroni correction), difference-in-differences, feature engineering pipelines (Scikit-learn, XGBo

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

senior-prompt-engineer

Use when the user asks to optimize prompts, design prompt templates, evaluate LLM outputs with an eval set, measure RAG retrieval quality, validate agent/tool configurations, analyze token usage, or design structured-output contracts. Covers eval-driven prompt iteration, RAG metrics (relevance, fait

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

shadcn-ui

Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.

slo-architect

Use when defining, reviewing, or operating SLOs/SLIs/error budgets. Triggers on "define an SLO", "what should our SLO be", "error budget", "burn rate", "SLI", "service level objective", "Google SRE workbook", "multi-window burn-rate alert", or any reliability-target question. Ships SLO designer, err

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

springboot-patterns

Spring Boot architecture patterns, REST API design, layered services, data access, caching, async processing, and logging. Use for Java Spring Boot backend work.

Sumber: affaan-m/ECC/tree/main/skills/springboot-patterns ↗ · ⭐ Dukung penulis

stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

stitch-loop

Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI.

swift-actor-persistence

Thread-safe data persistence in Swift using actors — in-memory cache with file-backed storage, eliminating data races by design.

Sumber: affaan-m/ECC/tree/main/skills/swift-actor-persistence ↗ · ⭐ Dukung penulis

swiftui-design

SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.

tailwindcss

Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

taste-skill

High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop.

Sumber: Leonxlnx/taste-skill ↗ · ⭐ Dukung penulis

terraform-patterns

Terraform infrastructure-as-code agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Covers module design patterns, state management strategies, provider configuration, security hardening, policy-as-code with Sentinel/OPA, and CI/CD plan/apply workflows. Use when: user wants

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

type-design-analyzer

Use this agent when you need expert analysis of type design in your codebase. Specifically use it (1) when introducing a new type to ensure it follows best practices for encapsulation and invariant expression, (2) during pull request creation to review all types being added, and (3) when refactoring

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

ui-ux-pro-max

UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects

Sumber: nextlevelbuilder/ui-ux-pro-max-skill ↗ · ⭐ Dukung penulis

unsplash-asset-images

Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for producing the right resolutions and aspect ratios (1:1, 4:5, 3:4, 16:9, 9

Sumber: MengTo/Skills ↗ · ⭐ Dukung penulis

ux-researcher-designer

UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use when conducting user research, creating personas, mapping user journeys, planning usability tests, or validating desig

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

vpe-advisor

VP of Engineering advisory for startups: delivery throughput (DORA 4 metrics + bottleneck identification), engineering hiring funnel (sourcing → screen → onsite → offer conversion + time-to-fill + pipeline gap), engineering team structure (squad/tribe/chapter design + tech-lead manager-trigger thres

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

web-design-guidelines

Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

workflow-builder

Design and write deterministic multi-agent workflow scripts (.js files in .claude/workflows/) for Claude Code's Workflow tool. Use when a user wants to build, create, author, scaffold, or run a custom Claude Code workflow, orchestrate sub-agents (fan-out, pipeline, loop, judge-panel), or automate a

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

owasp-audit

Audit application source code against the OWASP Top 10 (2021) vulnerability categories — broken access control, cryptographic failures, injection, insecure design, security misconfiguration, vulnerable components, authentication failures, data integrity, logging failures, SSRF. Use when the user mentions 'OWASP,' 'OWASP Top 10,' 'security audit,' 'security review,' 'secure code review,' 'code security review,' 'vulnerability audit,' 'find vulnerabilities,' 'appsec review,' 'application security audit,' 'check for security issues,' 'broken access control,' 'IDOR,' 'SQL injection,' 'XSS,' 'SSRF,' or wants to check their codebase for common security weaknesses.

Sumber: briiirussell/cybersecurity-skills ↗ · ⭐ Dukung penulis

iam-audit

Audit, design, and migrate Identity and Access Management — cloud provider IAM (AWS, GCP, Azure), identity providers (Okta, Entra ID / Azure AD, Auth0, Google Workspace), application authorization (RBAC, ABAC, ReBAC), and federated identity. Use when the user mentions 'IAM,' 'identity,' 'access management,' 'least privilege,' 'role design,' 'SSO,' 'SAML,' 'OIDC,' 'OAuth,' 'JIT access,' 'just-in-time access,' 'break-glass,' 'service accounts,' 'RBAC,' 'ABAC,' 'privilege creep,' 'role explosion,' 'identity governance,' 'IAM strategy,' 'identity migration,' 'Okta,' 'Entra ID,' 'Azure AD,' 'Auth0,' 'Cognito,' or needs identity consultant-level guidance.

Sumber: briiirussell/cybersecurity-skills ↗ · ⭐ Dukung penulis

soc-operations

Build, run, and improve a Security Operations Center — alert prioritization, runbook authoring, escalation criteria, on-call structure, alert tuning workflow, MTTD / MTTR / fidelity KPIs, analyst tiering, and shift handoffs. Use when the user mentions 'SOC,' 'security operations,' 'SOC analyst,' 'alert triage workflow,' 'runbook,' 'escalation,' 'on-call,' 'SOC tiering,' 'tier 1 / tier 2,' 'MTTD,' 'MTTR,' 'alert fatigue,' 'alert tuning,' 'shift handoff,' 'SOAR,' or wants to design or improve a security operations team.

Sumber: briiirussell/cybersecurity-skills ↗ · ⭐ Dukung penulis

iac-security

Guidance for securing Infrastructure-as-Code (Bicep, ARM, Terraform, and ACI/Container) pipelines on Azure — shift-left scanning, policy-as-code, secret hygiene, identity for pipelines, drift detection, and supply chain. Covers Microsoft Defender for Cloud DevOps Security (GitHub / Azure DevOps connectors), Microsoft Security DevOps (MSDO) extension, Bicep linter and template specs, Terraform best practices on Azure (state management, backend hardening, provider versions), Azure Policy as deploy-time and CI-time gate, GitOps with Flux/ArgoCD on AKS, secret scanning and dependency review, signed commits / artifact signing, OIDC federation for pipeline identity (no client secrets), and integration with Defender for Cloud posture. WHEN: IaC security, Bicep security, Terraform Azure security, Defender for Cloud DevOps Security, MSDO, Microsoft Security DevOps, shift-left Azure, policy as code, OIDC GitHub Actions Azure, secrets in IaC, drift detection, signed Bicep, supply chain Azure. DO NOT USE for Kubernetes admission control alone (use defender-for-containers), generic CI/CD design, or app-layer security.

Sumber: vinayaklatthe/microsoft-security-skills ↗ · ⭐ Dukung penulis

security-architecture

Guidance for designing security architecture using Zero Trust, the Microsoft Cybersecurity Reference Architectures (MCRA), Cloud Adoption Framework Secure methodology, and Well-Architected Security pillar. Covers the six Zero Trust pillars, defense-in-depth, and reference architecture alignment. WHEN: security architecture, Zero Trust design, MCRA, defense in depth, security reference architecture, CAF secure methodology, Well-Architected security pillar, end-to-end security design, security strategy, target state. DO NOT USE for tactical product configuration (use the product-specific skill) or for SOC tooling design (use sentinel / unified-secops-platform).

Sumber: vinayaklatthe/microsoft-security-skills ↗ · ⭐ Dukung penulis

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

Sumber: anthropics/skills ↗ · ⭐ Dukung penulis

evaluation

This skill should be used when building agent evaluation systems: deterministic checks, regression suites, multi-dimensional rubrics, quality gates, production monitoring, baseline comparison, and outcome measurement for agent pipelines.

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/evaluation ↗ · ⭐ Dukung penulis

long-horizon-prompting

This skill should be used when writing, enhancing, or evaluating the launch prompt for a long-running autonomous agent or a parallel multi-agent orchestration attacking a hard problem: pseudo-formal task briefs that define terms and an exact success predicate linguistically, enumerate non-counting o

Sumber: muratcankoylan/Agent-Skills-for-Context-Engineering/tree/main/skills/long-horizon-prompting ↗ · ⭐ Dukung penulis

adversarial-reviewer

Adversarial code review that breaks the self-review monoculture. Use when you want a genuinely critical review of recent changes, before merging a PR, or when you suspect Claude is being too agreeable about code quality. Forces perspective shifts through hostile reviewer personas that catch blind sp

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature.

Sumber: affaan-m/ECC/tree/main/skills/agent-architecture-audit ↗ · ⭐ Dukung penulis

agent-creator

Use this agent when the user asks to "create an agent", "generate an agent", "build a new agent", "make me an agent that...", or describes agent functionality they need. Trigger when user wants to create autonomous agents for plugins. Examples:

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

agent-development

This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

agent-protocol

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, and response formats. Use when C-suite agents need to query each other, coordinate cross-functional analysis, or run board meetings with multiple agent roles.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases.

Sumber: affaan-m/ECC/tree/main/skills/agentic-os ↗ · ⭐ Dukung penulis

analytics-tracking

Set up, audit, and debug analytics tracking implementation — GA4, Google Tag Manager, event taxonomy, conversion tracking, and data quality. Use when building a tracking plan from scratch, auditing existing analytics for gaps or errors, debugging missing events, or setting up GTM. Trigger keywords:

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

andreessen

Marc Andreessen-mode decision and productivity skill. A blunt, market-first operator that pressure-tests ideas, ventures, features, and career bets through Andreessen's actual frameworks — market dominates team and product; the only milestone that matters is product/market fit; bias to build over de

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

api-connector-builder

Build a new API connector or provider by matching the target repo's existing integration pattern exactly. Use when adding one more integration without inventing a second architecture.

Sumber: affaan-m/ECC/tree/main/skills/api-connector-builder ↗ · ⭐ Dukung penulis

api-test-suite-builder

Use when the user asks to generate API tests, create integration test suites, test REST endpoints, or build contract tests.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

apple-hig

Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.

architecture-critic

Reviews proposed target architectures and transformed code against modern best practice. Adversarial — looks for over-engineering, missed requirements, and simpler alternatives.

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

arquiteto-de-empresa

Company Architect: builds a business from scratch as an OKF (Open Knowledge Format) bundle — a tree of version-controllable .md files with frontmatter type, links forming a graph, and reserved index.md/log.md, readable by humans and agents. Guides the founder through a 12-phase interview (foundation

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

article-writing

Write articles, guides, blog posts, tutorials, newsletter issues, and other long-form content in a distinctive voice derived from supplied examples or brand guidance. Use when the user wants polished written content longer than a paragraph, especially when voice consistency, structure, and credibility matter.

Sumber: affaan-m/ECC/tree/main/skills/article-writing ↗ · ⭐ Dukung penulis

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

Sumber: ComposioHQ/awesome-claude-skills ↗ · ⭐ Dukung penulis

aside

Answer a quick side question without interrupting or losing context from the current task. Resume work automatically after answering.

atlassian-templates

Atlassian Template and Files Creator/Modifier expert for creating, modifying, and managing Jira and Confluence templates, blueprints, custom layouts, reusable components, and standardized content structures. Use when building org-wide templates, custom blueprints, page layouts, and automated content

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

autonomous-agent-harness

Transform Claude Code into a fully autonomous agent system with persistent memory, scheduled operations, computer use, and task queuing. Replaces standalone agent frameworks (Hermes, AutoGPT) by leveraging Claude Code's native crons, dispatch, MCP tools, and memory. Use when the user wants continuous autonomous operation, scheduled tasks, or a self-directing agent loop.

Sumber: affaan-m/ECC/tree/main/skills/autonomous-agent-harness ↗ · ⭐ Dukung penulis

board-deck-builder

Assembles comprehensive board and investor update decks by pulling perspectives from all C-suite roles. Use when preparing board meetings, investor updates, quarterly business reviews, or fundraising narratives. Covers structure, narrative framework, bad news delivery, and common mistakes.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

board-meeting

Multi-agent board meeting protocol for strategic decisions. Runs a structured 6-phase deliberation: context loading, independent C-suite contributions (isolated, no cross-pollination), critic analysis, synthesis, founder review, and decision extraction. Use when the user invokes /cs:boardroom, calls

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

board-prep

Board meeting preparation for the adversarial scenario, not the friendly one. Forces numbers-cold mastery, anticipates hard questions, builds a narrative that acknowledges weakness without losing the room. Use when preparing for a board meeting, an investor update, fundraising presentation, or any h

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

boardroom

/cs:boardroom <brief> — 6-phase multi-role deliberation across the C-suite with Phase 2 isolation, critic pre-screen, and synthesis. Outputs a board memo. Use when a decision spans multiple executive domains — e.g. a pricing change touching finance, positioning, and product, or a raise-vs-cut runway

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

brand-voice

Build a source-derived writing style profile from real posts, essays, launch notes, docs, or site copy, then reuse that profile across content, outreach, and social workflows. Use when the user wants voice consistency without generic AI writing tropes.

Sumber: affaan-m/ECC/tree/main/skills/brand-voice ↗ · ⭐ Dukung penulis

browser-automation

Use when the user asks to automate browser tasks, scrape websites, fill forms, capture screenshots, extract structured data from web pages, or build web automation workflows. NOT for testing — use playwright-pro for that.

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

browser-qa

Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.

Sumber: affaan-m/ECC/tree/main/skills/browser-qa ↗ · ⭐ Dukung penulis

build-mcp-server

This skill should be used when the user asks to "build an MCP server", "create an MCP", "make an MCP integration", "wrap an API for Claude", "expose tools to Claude", "make an MCP app", or discusses building something with the Model Context Protocol. It is the entry point for MCP server development

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

build-mcpb

This skill should be used when the user wants to "package an MCP server", "bundle an MCP", "make an MCPB", "ship a local MCP server", "distribute a local MCP", discusses ".mcpb files", mentions bundling a Node or Python runtime with their MCP server, or needs an MCP server that interacts with the lo

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

business-investment-advisor

Business investment analysis and capital allocation advisor. Use when evaluating whether to invest in equipment, real estate, a new business, hiring, technology, or any capital expenditure. Also use for ROI calculations, IRR, NPV, payback period, build vs buy decisions, lease vs buy analysis, vendor

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

business-rules-extractor

Mines domain logic, calculations, validations, and policies from legacy code into testable Given/When/Then specifications. Use when you need to separate "what the business requires" from "how the old code happened to implement it.

Sumber: anthropics/claude-plugins-official ↗ · ⭐ Dukung penulis

c-level-agents

Founder-mode executive team. 13 cs-* C-suite agents (CFO, CMO, CRO, CPO, COO, CHRO, CISO, GC, CDO, CAIO, CCO, VPE, Chief of Staff) and 21 /cs:* slash commands for forcing-question office hours, multi-role boardroom deliberation, strategic sprint pipeline, and meta routing. Use when the founder needs

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

c-level-skills

Index and router for the C-level advisory bundle: 33 skills covering 14 C-suite roles, orchestration, cross-cutting capabilities, and culture. Use when exploring what the c-level-advisor bundle contains, deciding which advisor skill fits a question, or finding the entry points (cs-onboard interview,

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

carrier-relationship-management

Codified expertise for managing carrier portfolios, negotiating freight rates, tracking carrier performance, allocating freight, and maintaining strategic carrier relationships. Informed by transportation managers with 15+ years experience. Includes scorecarding frameworks, RFP processes, market intelligence, and compliance vetting. Use when managing carriers, negotiating rates, evaluating carrier performance, or building freight strategies.

Sumber: affaan-m/ECC/tree/main/skills/carrier-relationship-management ↗ · ⭐ Dukung penulis

cavecrew

Decision guide for delegating to caveman-style subagents. Tells the main thread WHEN to spawn `cavecrew-investigator` (locate code), `cavecrew-builder` (1-2 file edit), or `cavecrew-reviewer` (diff review) instead of doing the work inline or using vanilla `Explore`. Subagent output is caveman-compressed so the tool-result injected back into main context is ~60% smaller — main context lasts longer across long sessions. Trigger: "delegate to subagent", "use cavecrew", "spawn investigator/builder/reviewer", "save context", "compressed agent output".

Sumber: JuliusBrussee/caveman/tree/main/skills/cavecrew ↗ · ⭐ Dukung penulis

caveman-help

Quick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".

Sumber: JuliusBrussee/caveman/tree/main/skills/caveman-help ↗ · ⭐ Dukung penulis

cdo-review

/cs:cdo-review <plan> — Decision-driven Chief Data Officer interrogation of any plan that touches training data, data architecture, data productization, or data team hiring. Use when validating training-data rights before model work, choosing warehouse vs lakehouse vs mesh, or valuing data assets fo

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

ceo-advisor

Executive leadership guidance for strategic decision-making, organizational development, and stakeholder management. Use when planning strategy, preparing board presentations, managing investors, developing organizational culture, making executive decisions, fundraising, or when user mentions CEO, s

Sumber: alirezarezvani/claude-skills ↗ · ⭐ Dukung penulis

cfo-advisor

Financial leadership for startups and scaling companies. Financial modeling, unit economics, fundraising strategy, cash management, and board financial packages. Use when building financial models, analyzing unit economics, planning fundraising, managing cash runway, preparing board materials, or wh