AgentSkillsCN

crear-slide

基于组件、注册信息及示例数据，为演示文稿创建全新幻灯片类型

SKILL.md
--- frontmatter
name: crear-slide
description: Create a new slide type for the presentation with component, registration, and example data
argument-hint: <slide-type-name> <description-of-what-it-shows>

Create a New Slide Type

The user wants to create a new slide type for a DEHN slide deck presentation. Use $ARGUMENTS to understand what kind of slide they need.

Steps

  1. •

    Read the existing patterns to understand the project structure:

    • •Read src/components/slides/index.jsx for the type registry
    • •Read src/data/slides.js for the slide data format
    • •Read one existing slide component (e.g., src/components/slides/AgendaSlide.jsx) as reference
  2. •

    Create the slide component at src/components/slides/<Name>Slide.jsx:

    • •Use the same patterns as existing slides
    • •Include the DEHN logo:
      • •White background slides: use dehn-logo-red.svg in top-right (absolute top-8 right-10, h-7 opacity-70)
      • •Dark background slides: use dehn-logo.svg in top-right (absolute top-8 right-10, h-8 opacity-60)
    • •Accept { content, animate } props
    • •Use Tailwind CSS classes consistent with the existing design
    • •Use animate-fade-in classes for entrance animations
    • •Use lucide-react for icons if needed
    • •Keep the DEHN red accent color (red-500, red-600) for highlights
  3. •

    Register the slide in src/components/slides/index.jsx:

    • •Add the export statement
    • •Add the import statement
    • •Add the type mapping in slideComponents
  4. •

    Add example data in src/data/slides.js:

    • •Add a new slide entry in the slidesData array
    • •Place it in the appropriate position (before demo/quiz/cheatsheet)
    • •Use an appropriate section name
  5. •

    Verify by running npm run build to ensure no errors

Design Guidelines

  • •White background (bg-white) for content slides
  • •Dark gradient background (bg-gradient-to-br from-gray-900 via-gray-900 to-gray-800) for transition/accent slides
  • •Title: text-4xl md:text-5xl font-bold text-gray-900
  • •Red accent line under titles: w-20 h-1.5 bg-gradient-to-r from-red-600 to-red-500 rounded-full
  • •Cards: bg-gray-50 rounded-2xl p-6 border border-gray-200
  • •Full height layout: flex flex-col h-full
  • •Padding: p-10 or p-12