How do I install the Plan And Design Page skill?

Run npx skillmds add majiayu000/plan-and-design-page in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Plan And Design Page skill do?

Plan to implement a page in sveltekit by listing out the components need to create or to use It is listed under Coding & Dev Tools on SkillMD.

Is Plan And Design Page safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Plan And Design Page?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Plan And Design Page free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Plan And Design Page?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Plan And Design Page by majiayu000 — Agent Skill

Name: Plan And Design Page
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

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.

---name: plan-and-design-pagedescription: Plan to implement a page in sveltekit by listing out the components need to create or to uselicense: MIT--- ## 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.

Frequently asked questions