LogoClawIndex
CasesSkillsAbout
LogoClawIndex

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.

Skills tagged: frontend

Browse skills that share this tag.

  • frontend-design-zh - Build static websites from text using React and Tailwind CSS
    frontendreacttailwindcssshadcn-ui

    ★ 55 · Updated 2026-09-23

    Creates production-ready static websites using React, Tailwind CSS, and shadcn/ui from text prompts, supporting Vite and Next.js workflows.

    ⚙ Generate static website code⚙ Implement mobile-first responsive layouts⚙ Configure Vite and Next.js workflows
  • moai-icons-vector - Vector Icon Libraries Enterprise Guide
    iconsvector-iconsreactsvg

    ★ 602 · Updated 2026-09-23

    Guide covering 10+ vector icon libraries, React implementation patterns, accessibility rules, and bundle size optimizations.

    ⚙ Select vector icon libraries⚙ Implement React icon components⚙ Create type-safe icon buttons
  • cleanui - AI UI Design Enforcement Skill
    ui-designfrontendreactreact-native

    ★ 30 · Updated 2026-09-23

    Enforces clean UI design rules and prevents generic AI design patterns across frontend code generation.

    ⚙ Enforce typography rules⚙ Eliminate generic AI design patterns⚙ Match layout to content
  • neumorphism - Web and App implementation guide for Neumorphism (Soft UI).
    neumorphismsoft-uifrontendcss

    ★ 3 · Updated 2026-09-22

    Provides implementation guidance and code examples for Neumorphism styling across Web, SwiftUI, Flutter, React Native, and Jetpack Compose.

    ⚙ Implement neumorphic styling in CSS⚙ Implement neumorphic views in SwiftUI⚙ Implement neumorphic widgets in Flutter
  • aico-frontend-implement - Execute frontend task implementation with TDD
    frontendtddtestingimplementation

    ★ 602 · Updated 2026-09-22

    Executes frontend implementation tasks following TDD by reading task files, executing steps, verifying changes, and updating status.

    ⚙ Read task file⚙ Read constraint documentation⚙ Execute implementation steps
  • delight - Enhance user interfaces with micro-interactions and delight
    ui-designuxmicro-interactionsanimation

    ★ 602 · Updated 2026-09-22

    Add moments of joy, personality, and unexpected touches to elevate functional interfaces into memorable and enjoyable experiences.

    ⚙ Gather audience and brand context⚙ Identify interface delight opportunities⚙ Execute frontend design skill
  • avoid-ai-design - Audit and rewrite frontend UI to remove AI design patterns
    designuifrontendai-slop

    ★ 79 · Updated 2026-09-22

    Audits and rewrites HTML/CSS and React/Tailwind frontend UI to eliminate generic AI design patterns, with support for audit-only mode.

    ⚙ Audit frontend code for AI patterns⚙ Render UI previews when available⚙ Commit to unified design directions
  • frontend-architecture-planner - Plan frontend architecture through structured questioning.
    frontendarchitectureplanningreact

    ★ 0 · Updated 2026-09-22

    Clarifies product scope, UI patterns, component architecture, state management, and engineering constraints before code implementation.

    ⚙ Ask structured architectural questions⚙ Summarize architectural decisions⚙ Recommend frontend technology stacks
  • frontend-design - Guidance for distinctive visual design when building UI.
    frontenddesignuitypography

    ★ 0 · Updated 2026-09-22

    Provides guidance for intentional visual design, typography, color, layout, and copy when creating or updating UIs.

    ⚙ Ground designs in subject matter⚙ Create design plan with tokens⚙ Review design plan against brief
  • delight - Add moments of joy and polish to user interfaces
    ui-designanimationmicro-interactionuser-experience

    ★ 0 · Updated 2026-09-22

    Identifies opportunities to add micro-interactions, copy personality, and visual polish to elevate functional interfaces into delightful experiences.

    ⚙ Assess delight opportunities⚙ Apply micro-interactions and animations⚙ Craft contextual personality copy
  • delight - Add moments of joy and polish to user interfaces
    uiuxfrontendanimation

    ★ 0 · Updated 2026-09-22

    Identifies opportunities and implements subtle animations, personality copy, micro-interactions, sound cues, and celebrations to enhance interface usability.

    ⚙ Assess delight opportunities in interfaces⚙ Implement micro-interactions and animations⚙ Add personality to UI copy
  • figma-to-code - Figma-to-Code Fidelity Skill
    figmafrontendui-reproductioncode-generation

    ★ 0 · Updated 2026-09-22

    Enforces pixel-faithful reproduction of Figma designs into code without creative substitutions or approximations.

    ⚙ Extract exact design properties⚙ Download actual design assets⚙ Reproduce layouts and components
  • delight - Add delight, personality, and polish to user interfaces
    ui-designfrontendmicro-interactionsanimation

    ★ 0 · Updated 2026-09-22

    Identifies opportunities and implements micro-interactions, copy personality, animations, and sound design to enhance interface user experience.

    ⚙ Assess delight opportunities⚙ Define delight strategy⚙ Add micro-interactions and animations
  • frontend-mobile-security-xss-scan - XSS Vulnerability Scanner for Frontend Code
    skillsecurityapp-securityfrontend

    ★ 15 · Updated 2026-09-21

    Analyzes React, Vue, Angular, and vanilla JavaScript code to detect injection points and prevent XSS vulnerabilities.

    ⚙ Scan codebases for XSS vulnerabilities⚙ Detect unsafe DOM manipulation patterns⚙ Identify framework specific XSS risks
  • frontend-design - Create distinctive, production-grade frontend interfaces.
    frontenddesignuicode-generation

    ★ 3 · Updated 2026-09-21

    Generates production-grade frontend code for web components, pages, artifacts, and applications while avoiding generic AI aesthetics.

    ⚙ Gather required project design context⚙ Run teach-impeccable for missing context⚙ Establish bold conceptual design directions
  • overdrive - Push web interfaces past conventional limits.
    frontenduianimationperformance

    ★ 0 · Updated 2026-09-21

    Pushes web interfaces past conventional limits using advanced browser APIs, motion physics, and high-performance rendering techniques.

    ⚙ Propose multiple design directions⚙ Iterate visual effects with browser automation⚙ Implement progressive enhancement fallbacks
  • overdrive - Push web interfaces past conventional limits.
    ui-designfrontendanimationwebgl

    ★ 0 · Updated 2026-09-21

    Enhance interface capabilities using advanced Web APIs, custom rendering, smooth transitions, and high-performance techniques with progressive enhancement.

    ⚙ Propose technical directions before implementation⚙ Clarify choices using AskUserQuestion tool⚙ Verify visuals with browser automation
  • connect-to-backend-api - Connect Frontend to Backend API Routes
    api-integrationfrontendtypescriptservice-layer

    ★ 0 · Updated 2026-09-21

    Connect frontend to backend API routes by creating service files, handling API calls, managing response errors, and transforming data.

    ⚙ Create backend service files⚙ Define TypeScript resource types⚙ Execute HTTP API calls
  • overdrive - Push interfaces past conventional limits with custom effects.
    frontenduianimationwebgl

    ★ 0 · Updated 2026-09-21

    Pushes web interfaces beyond conventional limits using shaders, virtual scrolling, advanced animations, and performance optimization techniques.

    ⚙ Propose technical implementation directions⚙ Preview effects via browser automation⚙ Implement cinematic interface transitions
  • ui-ux-frontend-basics - UI/UX basics for frontend pages and components
    ui-uxfrontendlayouttypography

    ★ 0 · Updated 2026-09-21

    Applies practical UI/UX guidelines when designing or polishing frontend pages and components.

    ⚙ Classify UI surface types⚙ Establish visual hierarchy⚙ Apply spacing scales

Scroll to load more