frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
- License 许可
- Apache-2.0
- 所属仓库
- RyouMon/MyReader
- 最近更新
- 2026-11-10
- Stars
- ★ 2
- Forks
- 0
01 前言 Front Matter
- name
- list_tasks
- triggers
- show, list, view, my tasks, what do I have, todo list, pending tasks, completed tasks, what's on my list
- description
- Shows the user's tasks, with optional status filter
02 资源文件 1
- 许可证LICENSE.txt9.9 KB
03 SKILL.md 正文
Tool for displaying user's tasks.
Parameters expected:
- status (string, optional): "all" (default), "pending", "completed"
Rules & behavior:
- If status="pending" → only show incomplete tasks
- If status="completed" → only show finished tasks
- Format output nicely: numbered list with title + status emoji (✓ or ☐)
- If no tasks: "Your list is empty right now. Want to add something?"
- Example reply: "Here are your pending tasks:\n1. Buy groceries ☐\n2. Call mom ☐"
- Always filter by current user's ID only
04 同仓库更多 Skills
cross-platform-ui-spec
Apply the shared MyReader design workflow to desktop or mobile UI changes in Cursor.
zustand-state-management
Zustand v5 store patterns, TypeScript create<T>()() usage, persist/devtools middleware, hydration pitfalls, slices, and migration notes. Use when implementing or reviewing global client state with Zustand in React apps.
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.