skills.rest
mikemikula
mikemikulaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

todo-components

Enforce dark-mode Todo component conventions with shadcn/ui and Suspense loaders.

2|1|Updated Feb 24, 2026
Search Tags:#suspense#react#tailwind#todo#shadcn#dark-mode#priority-filter
One-click install
npx skills add https://github.com/mikemikula/AI-Coding-Summit-2026 --skill todo-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: todo-components
Source: https://github.com/mikemikula/AI-Coding-Summit-2026/tree/main/.cursor/skills/todo-components
Command: npx skills add https://github.com/mikemikula/AI-Coding-Summit-2026 --skill todo-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintains consistent Todo UI component conventions so developers never mix light-mode styles, forget Suspense loaders, or misuse shadcn/ui primitives when building the project.

Core Features & Use Cases

  • Component Guidance: Details the TodoForm, TodoList, TodoItem, TodoSkeleton, and PriorityFilter roles, clarifying when to add 'use client', how to use cn() for conditional Tailwind, and that only shadcn primitives plus Lucide icons are permitted for dark-mode styling.
  • Suspense Data Flow: Prescribes the async loader pattern that fetches data inside Suspense with TodoSkeleton fallbacks, preventing data resolution above the boundary so streaming works correctly.
  • Priority & Feedback Rules: Directs deriving options and colors from PRIORITY_OPTIONS and PRIORITY_COLORS, updating ?priority= via router state, and emitting success/error toasts with sonner when invoking server actions during client interactions. Use this guidance when building, reviewing, or refactoring files under components/todos/ to ensure the Todo UI matches project conventions.

Quick Start

Build or review the todo components by following the dark-mode shadcn primitives, Suspense loader, and priority constants guidance to keep the UI consistent.

Frequently Asked Questions about todo-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build dark-mode todo components with shadcn/ui and Tailwind CSS?▼

Dark-mode todo components use shadcn/ui primitives and cn-based Tailwind classes to maintain consistent UI styling. You apply only shadcn primitives plus Lucide icons, ensuring TodoForm, TodoList, and TodoItem match project conventions without light-mode styles.

How do I use React Suspense for data loading in a todo list?▼

React Suspense data loading fetches data inside the boundary with TodoSkeleton fallbacks. This async loader pattern prevents data resolution above the boundary, ensuring streaming works correctly while users see skeleton loaders during todo data retrieval.

How do I implement a priority filter for a todo app using React state?▼

A priority filter derives options and colors from imported PRIORITY_OPTIONS and PRIORITY_COLORS constants. You update the ?priority= URL parameter via router state, keeping filter selection synchronized with application routing for consistent todo filtering.

What's the best way to show toast notifications for server actions in React?▼

Toast notifications for server actions use sonner to emit success and error messages during client interactions. This pattern ensures users receive immediate feedback when invoking server actions within todo components like TodoForm submissions.

When should I add 'use client' to React todo components?▼

The 'use client' directive is needed when todo components handle client interactions, router state updates, or server action invocations. Components like TodoForm and PriorityFilter require it, while data-fetching components can remain server components within Suspense boundaries.

Can I use custom UI components instead of shadcn/ui primitives for dark-mode styling?▼

Dark-mode styling requires shadcn/ui primitives exclusively, combined with cn-based Tailwind classes and Lucide icons. Custom UI components are not permitted, ensuring todo components maintain consistent visual conventions across TodoForm, TodoList, and TodoItem implementations.

Related Skills

Explore More Software Engineering Skills→
mikemikulamikemikula
2

tailwind-shadcn-setup

Configure Tailwind v4 and shadcn/ui dark-mode styling in Next.js projects.

Community
Intermediate
serverpodserverpod
8

shadcn_ui-sonner

Display and manage toast notifications in Flutter apps using shadcn_ui Sonner.

Official
Basic
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate