oborchers/speed-is-the-feature
saas-design-principles/skills/speed-is-the-feature/SKILL.md
This skill should be used when the user is building or reviewing loading states, optimistic UI updates, skeleton screens, code splitting, lazy loading, or performance budgets. Covers perceived speed, bundle size optimization, INP targets, and any work where application responsiveness and perceived latency matter.
$ install --global
skillsauthnpx skillsauth add oborchers/fractional-cto speed-is-the-featureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 13, 2026, 6:52 AM128.1s4 files scanned
SKILL.md
- name:
- speed-is-the-feature
- description:
- This skill should be used when the user is building or reviewing loading states, optimistic UI updates, skeleton screens, code splitting, lazy loading, or performance budgets. Covers perceived speed, bundle size optimization, INP targets, and any work where application responsiveness and perceived latency matter.
- version:
- 1.0.0
Speed Is the Feature
Speed is not an optimization — it is the product. Linear built a billion-dollar company on this insight. Every architectural decision should serve Nielsen's three perception thresholds.
The Three Thresholds
| Threshold | Perception | Target For | |-----------|------------|------------| | 100ms | Instantaneous — feels caused by the user | Toggles, selections, navigating between loaded views | | 1 second | Flow uninterrupted — user feels in control | Page transitions, data loads | | 10 seconds | Attention limit — user wants to multitask | Show percent-done indicator or lose them |
Core Principle: Decouple Feedback from the Network
The UI must respond before the server confirms. This does not require a local-first architecture — it requires separating the feedback loop from network latency.
Optimistic UI
Update the UI immediately on user action. Reconcile with the server in the background.
When to use optimistic updates:
- Simple, binary-like actions (like, toggle, send, favorite)
- Actions with a success rate exceeding 97%
- Client-side validation passes before sending
Rules:
- Always handle failure gracefully — revert state and explain what happened
- Validate inputs client-side before the optimistic update
- Never use optimistic UI to mask genuinely slow operations — fix the operation instead
Skeleton Screens
Skeleton screens beat spinners, but only when done correctly.
Research findings (Bill Chung):
- Left-to-right shimmer animation is perceived as shorter than pulsing opacity
- Slow, steady motion beats fast motion
- Skeleton elements must match actual content layout — a skeleton showing only header and footer is functionally a spinner
When to use which loading indicator:
| Load Duration | Indicator | |---------------|-----------| | < 1.5 seconds | Nothing, or a subtle spinner | | 1.5–10 seconds | Skeleton screen with shimmer | | > 10 seconds | Percent-done progress bar |
Performance Budget
Enforce concrete budgets, not aspirational goals.
Bundle budget: Total JavaScript under 200KB gzipped. Code-split by route. Lazy-load modals, charts, and non-critical UI.
Responsiveness budget: INP (Interaction to Next Paint) must stay at or below 200ms. This measures responsiveness across all interactions, not just page load. Keep main-thread tasks under 50ms. Break long operations with requestAnimationFrame or scheduler.yield().
Examples
Working implementations in examples/:
examples/optimistic-update.md— Toggle-favorite pattern with rollback in React, Vue, and Svelteexamples/skeleton-screen.md— Shimmer CSS and skeleton components matching content layoutexamples/code-splitting.md— Route-level splitting and lazy-loading in React, Vue, and SvelteKit
Review Checklist
When reviewing existing code for speed:
- [ ] Direct-manipulation interactions (toggle, select, tab switch) respond within 100ms
- [ ] Page transitions complete within 1 second
- [ ] Long operations (>10s) show progress indicators
- [ ] Optimistic updates used for high-success-rate actions
- [ ] Failure states gracefully revert optimistic updates
- [ ] Skeleton screens match actual content layout
- [ ] Routes are code-split
- [ ] Non-critical UI is lazy-loaded
- [ ] No main-thread tasks exceed 50ms
Related Skills
oborchers/using-planning-tools
tools
VerifiedTrustedCommunity
This skill should be used when the user invokes any /plan-* command from the planning-tools plugin (/plan-context, /plan-master, /plan-open-questions, /plan-verify, /plan-tick, /plan-progress, /plan-delete), asks how Claude Code's plan files work, asks where plans are stored, asks to author or audit a multi-phase master planning document, asks how to walk through a plan's Open Questions interactively, asks how to write progress entries, or mentions ~/.claude/plans/ or .claude/planning-tools.local.md. Provides the index of planning-tools commands, the master-plan workflow lifecycle, the v0.3.0+ list-shape mandate (phases and questions as headings + bulleted scope items, never tables), the v0.3.2+ plain-bullet shape (no `- [ ]` checkboxes — heading emoji is the sole tick signal), the progress-entry methodology, and the mechanics of Claude Code's plan-mode file storage.
14SKILL.mdUpdated May 13, 2026
oborchers/whitespace-density
testing
VerifiedTrustedCommunity
This skill should be used when the user is adjusting spacing, padding, margins, content density, section gaps, vertical rhythm, or separation between elements. Also applies when reviewing whether a design feels cramped or too sparse, choosing between borders and whitespace for separation, or defining a spacing system. Covers the 4px/8px spacing system, macro vs micro whitespace, content density spectrum, separation techniques (whitespace > background shifts > borders), and vertical rhythm.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-interest-expression
development
VerifiedTrustedCommunity
This skill should be used when the user is defining brand personality in design, choosing between illustration and photography, adding motion or animation, creating visual motifs, ensuring layout variety, customizing CSS framework defaults, or calibrating the level of creative expression for a given context. Covers Lavie & Tractinsky's expressive aesthetics, the expression spectrum (restrained to bold), brand personality translation, illustration systems, photography direction, and template independence.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-hierarchy
development
VerifiedTrustedCommunity
This skill should be used when the user is establishing visual importance, designing headings, creating focal points, designing CTAs or buttons, arranging label-data relationships, implementing scanning patterns (F-pattern, Z-pattern), or ensuring one dominant element per screen. Covers the three levers of hierarchy (size, weight, color), three-tier information architecture, the 'emphasize by de-emphasizing' principle, CTA design, and label-data relationships.
12SKILL.mdUpdated May 22, 2026