← All skill packs

UI Design & Frontend Skills

Skill pack
5 skills0 selected
stuffbucketSkills in this pack

Professional typography rules for UI design and web applications. Enforces typographic correctness (proper quotes, dashes, spacing, hierarchy, layout). Auto-apply when generating HTML/CSS/React/JSX with visible text. Audit mode when reviewing existing interfaces. Use when building UIs, creating components, designing layouts, or fixing typography.

English

Use when wiring managed state into Tauri v2 commands — registering state with app.manage() in setup, accessing it via State, async state with tokio::sync::Mutex (never std::sync::Mutex across .await), interior mutability (Arc, RwLock, parkinglot), AppHandle::state::T() outside commands, or composing multiple state types.

English

Use when adding iOS (Swift) or Android (Kotlin) native code to a Tauri v2 plugin — tauri plugin android add / ios add scaffolds, the @TauriPlugin Kotlin class with @Command methods, the Swift Plugin subclass with @objc func cmd( invoke: Invoke), marshaling args via @InvokeArg / Decodable, calling native code from Rust with PluginHandle::runmobileplugin("methodName", payload), the checkPermissions / requestPermissions UX, and debugging the native side in Xcode / Android Studio.

English

Use when scaffolding a Tauri v2 app, fixing missing system prerequisites (Rust, WebView2, webkit2gtk, Xcode CLT), integrating a JS framework (especially Vite) with Tauri, or migrating an existing Tauri v1 project to v2.

English

Use when managing the lifetime of a sidecar child in a Tauri v2 app — stashing CommandChild in MutexOption... managed state, draining CommandEvent::{Stdout,Stderr,Terminated,Error} on a tokio::spawn receiver, supervised restart-on-crash with exponential backoff, killing on RunEvent::ExitRequested (and the Windows taskkill /T /F /PID escalation when grandchildren survive), choosing graceful SIGTERM vs immediate SIGKILL, and HTTP health-check polling against the sidecar's port.

English

Includes Design Typography Rules, Tauri Commands State Injection, Tauri Plugin Dev Mobile Bridges, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills5CategorygeneralStars0

What’s included

Design Typography Rules

Professional typography rules for UI design and web applications. Enforces typographic correctness (proper quotes, dashes, spacing, hierarchy, layout). Auto-apply when generating HTML/CSS/React/JSX with visible text. Audit mode when reviewing existing interfaces. Use when building UIs, creating components, designing layouts, or fixing typography.

Tauri Commands State Injection

Use when wiring managed state into Tauri v2 commands — registering state with app.manage() in setup, accessing it via State, async state with tokio::sync::Mutex (never std::sync::Mutex across .await), interior mutability (Arc, RwLock, parkinglot), AppHandle::state::T() outside commands, or composing multiple state types.

Tauri Plugin Dev Mobile Bridges

Use when adding iOS (Swift) or Android (Kotlin) native code to a Tauri v2 plugin — tauri plugin android add / ios add scaffolds, the @TauriPlugin Kotlin class with @Command methods, the Swift Plugin subclass with @objc func cmd( invoke: Invoke), marshaling args via @InvokeArg / Decodable, calling native code from Rust with PluginHandle::runmobileplugin("methodName", payload), the checkPermissions / requestPermissions UX, and debugging the native side in Xcode / Android Studio.

Tauri Setup

Use when scaffolding a Tauri v2 app, fixing missing system prerequisites (Rust, WebView2, webkit2gtk, Xcode CLT), integrating a JS framework (especially Vite) with Tauri, or migrating an existing Tauri v1 project to v2.

Tauri Sidecar Lifecycle

Use when managing the lifetime of a sidecar child in a Tauri v2 app — stashing CommandChild in MutexOption... managed state, draining CommandEvent::{Stdout,Stderr,Terminated,Error} on a tokio::spawn receiver, supervised restart-on-crash with exponential backoff, killing on RunEvent::ExitRequested (and the Windows taskkill /T /F /PID escalation when grandchildren survive), choosing graceful SIGTERM vs immediate SIGKILL, and HTTP health-check polling against the sidecar's port.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Design Typography Rules skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas