anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
Use this skill to install and verify Compose HotSwan end to end so a developer goes from zero to working sub-second hot reload on a real device or emulator in one session. Covers the JetBrains IDE plugin install, the `com.github.skydoves.compose.hotswan.compiler` Gradle plugin wiring, the canonical `hotSwanCompiler { enabled = true; debugOnly = true }` DSL block, the HotSwan tool window flow, and the first save-to-reload verification. Trigger when the user mentions HotSwan, Compose hot reload, instant UI update, "save and see", "no rebuild", live edit on device, fast Compose iteration, or already has the JetBrains plugin installed and asks how to apply the Gradle compiler plugin.
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/skydoves/compose-performance-skills/setting-up-compose-hotswan/install.md ,按里面的步骤帮我安装这个 Skill。
Compose HotSwan is a JetBrains IDE plugin plus a Gradle compiler plugin that swaps changed Kotlin classes into a running Compose app on a real device or emulator in under one second, preserving navigation, scroll, and remember state. This skill installs both pieces, wires the canonical Gradle DSL with debugOnly = true, and verifies the first save-to-reload round-trip. Sibling skills cover what does and does not hot-reload (../understanding-hot-reload-limits/SKILL.md), state preservation across reloads, and the AI-driven iteration loop.
Versions verified at the time of authoring. Confirm against the current release notes for newer minors.
libs.versions.toml + root build + app build wiring.WATCHING.../understanding-hot-reload-limits/SKILL.md.org.jetbrains.kotlin.plugin.compose Gradle plugin already applied on the Compose modules.adb devices.Declare the plugin in libs.versions.toml so the version pins centrally:
[plugins]
hotswan-compiler = { id = "com.github.skydoves.compose.hotswan.compiler", version = "1.2.10" }
Pin 1.2.10 (latest verified at the time of authoring). Check the HotSwan releases page for newer stable versions before adopting; HotSwan iterates frequently and a newer minor often ships compatibility for a newer Compose runtime. The plugin id is com.github.skydoves.compose.hotswan.compiler exactly. Do not swap the com.github prefix for any other vendor namespace; HotSwan is published under com.github.skydoves.
Apply at the root build.gradle.kts with apply false so the plugin is resolved once but only attaches to modules that opt in:
plugins {
alias(libs.plugins.hotswan.compiler) apply false
}
Apply in each Compose app module's build.gradle.kts:
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
alias(libs.plugins.hotswan.compiler)
}
Configure the canonical DSL block in the same module file. The capital S in hotSwanCompiler is part of the identifier:
hotSwanCompiler {
enabled = true
debugOnly = true
}
debugOnly = true is the default and the rule for production. Release builds MUST NOT carry the HotSwan transformations.
Sync Gradle. The build should resolve without errors. Confirm the plugin attached by inspecting the build's plugin list (./gradlew :app:buildEnvironment or the IDE Gradle tool window).
Open the HotSwan tool window via View -> Tool Windows -> HotSwan. Click Start. The status indicator should change to READY.
Run the app normally with the Run action. Once the app process connects, the tool window status moves from READY to WATCHING.
Make a body-only edit and save. Change the color or text inside one composable function body, then save the file. The change should appear on device in under one second; navigation, scroll position, and remember values stay intact.
If the change does not appear, fall through to the troubleshooting checklist below before changing any Gradle configuration.
// WRONG
hotSwanCompiler {
enabled = true
}
// WRONG because: omitting `debugOnly = true` allows the HotSwan transformations to attach to release
// builds. They are diagnostic-only and MUST NOT ship in production.
// RIGHT
hotSwanCompiler {
enabled = true
debugOnly = true
}
// WRONG
hotswanCompiler {
enabled = true
debugOnly = true
}
// WRONG because: the extension is hotSwanCompiler with a capital S in the middle. Lowercase will
// not resolve and Gradle reports an unknown extension.
// RIGHT
hotSwanCompiler {
enabled = true
debugOnly = true
}
// WRONG (root build.gradle.kts)
plugins {
alias(libs.plugins.hotswan.compiler)
}
// WRONG because: applying at the root project triggers the compiler plugin everywhere, including
// modules without Compose. Use apply false at the root and alias(...) inside each Compose module.
// RIGHT (root build.gradle.kts)
plugins {
alias(libs.plugins.hotswan.compiler) apply false
}
// RIGHT (app/build.gradle.kts; Compose module)
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
alias(libs.plugins.hotswan.compiler)
}
hotSwanCompiler {
enabled = true
debugOnly = true
}
// WRONG
import com.github.skydoves.compose.hotswan.runtime.HotReloadable
@HotReloadable
@Composable
fun Greeting() { Text("Hello") }
// WRONG because: HotSwan is a build-time and IDE-time tool. Production code must not import
// HotSwan runtime classes or annotations; the Gradle plugin attaches transformations during
// compilation without requiring source-level coupling.
// RIGHT
@Composable
fun Greeting() { Text("Hello") }
# gradle/libs.versions.toml
[plugins]
hotswan-compiler = { id = "com.github.skydoves.compose.hotswan.compiler", version = "1.2.10" }
// build.gradle.kts (root)
plugins {
alias(libs.plugins.android.application) apply false
alias(libs.plugins.kotlin.android) apply false
alias(libs.plugins.kotlin.compose) apply false
alias(libs.plugins.hotswan.compiler) apply false
}
// app/build.gradle.kts
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
alias(libs.plugins.hotswan.compiler)
}
hotSwanCompiler {
enabled = true
debugOnly = true
}
READY after Run. The device is not connected. Run adb devices and confirm the device or emulator is listed; reconnect USB or restart the emulator.WATCHING but no reload on save. The save was a structural change (parameter, constructor, interface, inline function, new resource id). Cross-link ../understanding-hot-reload-limits/SKILL.md to identify the boundary.Activity.recreate()) recomposition. Cross-link the state-preservation sibling skill once available.hotSwanCompiler { ... } block does not resolve. Gradle did not sync after adding the plugin. Re-sync; verify Kotlin 2.0+ is the active Kotlin version on the module; verify the alias matches the entry in libs.versions.toml.debugOnly = true. HotSwan transformations are diagnostic-only and MUST NOT ship in release builds.apply false so non-Compose modules are not transformed.org.jetbrains.kotlin.plugin.compose is applied on Kotlin 2.0+ before adding HotSwan.libs.versions.toml so all Compose modules in the project use a single version. The latest verified version is 1.2.10; check hotswan.dev/docs/releases for newer stable releases before pinning.../iterating-with-ai-and-mcp/SKILL.md) once the developer is comfortable with manual hot reload and wants Claude to drive the edit-reload-screenshot cycle via MCP../gradlew :app:buildEnvironment lists the com.github.skydoves.compose.hotswan.compiler plugin among applied plugins.WATCHING after the app launches with Run.Text color inside a composable and saving the file changes the color on device within one second.remember values, scroll position, and the navigation back stack survive the change../gradlew :app:assembleRelease) does not include HotSwan transformations. Verify by confirming debugOnly = true is set, or by inspecting the release dex with dexdump for the absence of HotSwan-injected helper classes.com.github.skydoves.compose.hotswan.* symbol (grep -R "com.github.skydoves.compose.hotswan" src/main/ returns zero hits)./docs/gradle-configuration)../understanding-hot-reload-limits/SKILL.md for the boundary between hot-reloadable and rebuild-forcing changes.
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发