Claude Code Plugins

Community-maintained marketplace

Feedback

plan-and-design-page

@Oungseik/gakom
0
0

Plan to implement a page in sveltekit by listing out the components need to create or to use

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name plan-and-design-page
description Plan to implement a page in sveltekit by listing out the components need to create or to use
license MIT
compatibility opencode

What I do

  • ask and list out the features and things to show in the page. For example, dashboard to show statistics, table to manage users.
  • list out the shadcn components to use to achieve the goal.
  • list out the shadcn components need to use.
  • decide need to implement custom components based on the shadcn components and list out the components need to implement
  • checkout apps/<package>/src/lib/server/orpc/router.ts and list the require apis. If the necessary apis are not available, stop immediately and tell the api need to implement.
  • write down the plan in details in a markdown file.

No need to manually install shadcn components

Available Shadcn Svelte and Shadcn Svelte Extra Components

  • Accordion
  • Alert Dialog
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button Group
  • Button
  • Calendar
  • Card
  • Carousel
  • Chat
  • Chart
  • Checkbox
  • Code
  • Collapsible
  • Combobox
  • Command
  • Confirm Delete Dialog
  • Context Menu
  • Copy Button
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Emoji Picker
  • Empty
  • Field
  • Field Set
  • File Drop Zone
  • Formsnap
  • Hover Card
  • Image Cropper
  • Input Group
  • Input OTP
  • Input
  • IPv4Address Input
  • Item
  • Kbd
  • Label
  • Language Switcher
  • Light Switch
  • Link
  • Menubar
  • Meter
  • Modal
  • Native Select
  • Navigation Menu
  • NLPDataInput
  • Number Field
  • Pagination
  • Password
  • Phone Input
  • PMCommand
  • Popover
  • Progress
  • Radio Group
  • Range Calendar
  • Rename
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Snippet
  • Sonner
  • Spinner
  • Star Rating
  • Switch
  • Table
  • Table of Contents
  • Tabs
  • Tags Input
  • Textarea
  • Terminal
  • Theme Selector
  • Toggle Group
  • Toggle
  • Tooltip
  • Tree View
  • Typography
  • Underline Tabs
  • Windows

When to use me

Use this when you are planning to develop a page. Ask clarifying questions if the you are unclear about features or necessary actions.