Three core patterns: show loading indicators only when data is absent, always surface errors to users, and disable buttons during async operations to prevent duplicate submissions
Includes decision trees and component examples for skeleton vs. spinner selection, error state hierarchy (inline, toast, banner, full screen), and empty state requirements for all collections
Fetches react-ui-patterns from davila7/claude-code-templates and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/react-ui-patterns
Restart Cursor to activate react-ui-patterns. Access via /react-ui-patterns in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Never show stale UI - Loading spinners only when actually loading
Always surface errors - Users must know when something fails
Optimistic updates - Make the UI feel instant
Progressive disclosure - Show content as it becomes available
Graceful degradation - Partial data is better than no data
Loading State Patterns
The Golden Rule
Show loading indicator ONLY when there's no data to display.
// CORRECT - Only show loading when no data existsconst{ data, loading, error }=useGetItemsQuery();if(error)return<ErrorState error={error} onRetry={refetch}/>;if(loading &&!data)return<LoadingState />;if(!data?.items.length)return<EmptyState />;return<ItemList items={data.items}/>;
// WRONG - Shows spinner even when we have cached dataif(loading)return<LoadingState />;// Flashes on refetch!
Loading State Decision Tree
Is there an error?
→ Yes: Show error state with retry option
→ No: Continue
Is it loading AND we have no data?
→ Yes: Show loading indicator (spinner/skeleton)
→ No: Continue
Do we have data?
→ Yes, with items: Show the data
→ Yes, but empty: Show empty state
→ No: Show loading (fallback)
Skeleton vs Spinner
Use Skeleton When
Use Spinner When
Known content shape
Unknown content shape
List/card layouts
Modal actions
Initial page load
Button submissions
Content placeholders
Inline operations
Error Handling Patterns
The Error Handling Hierarchy
1. Inline error (field-level) → Form validation errors
2. Toast notification → Recoverable errors, user can retry
3. Error banner → Page-level errors, data still partially usable
4. Full error screen → Unrecoverable, needs user action
Always Show Errors
CRITICAL: Never swallow errors silently.
// CORRECT - Error always surfaced to userconst[createItem,{ loading }]=useCreateItemMutation({onCompleted:()=>{ toast.success({ title:'Item created'});},onError:(error)=>{console.error('createItem failed:', error); toast.error({ title:'Failed to create item'});},});// WRONG - Error silently caught, user has no ideaconst[createItem]=useCreateItemMutation({onError:(error)=>{console.error(error);// User sees nothing!},});
Error State Component Pattern
interfaceErrorStateProps{ error: Error; onRetry?:()=>void; title?:string;}constErrorState=({ error, onRetry, title }: ErrorStateProps)=>(<div className="error-state"><Icon name="exclamation-circle"/><h3>{title ??'Something went wrong'}</h3><p>{error.message}</p>{onRetry &&(<Button onClick={onRetry}>Try Again</Button>)}</div>);
CRITICAL: Always disable triggers during async operations.
// CORRECT - Button disabled while loading<Buttondisabled={isSubmitting}isLoading={isSubmitting}onClick={handleSubmit}> Submit
</Button>// WRONG - User can tap multiple times<ButtononClick={handleSubmit}>{isSubmitting ?'Submitting...':'Submit'}</Button>
// Search with no results<EmptyStateicon="search"title="No results found"description="Try different search terms"/>// List with no items yet<EmptyStateicon="plus-circle"title="No items yet"description="Create your first item"action=
Implementation Guide
Prerequisites
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
