Agent skill
swiftui-components
Build production SwiftUI views, custom components, layouts, and view modifiers. Use when creating iOS/macOS UI components, implementing responsive layouts, building custom modifiers, or designing reusable view hierarchies with @ViewBuilder.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/swiftui-components-fusengine-agents
SKILL.md
SwiftUI Components & Views
Core Principles
- Small, focused views - Extract subviews at 30+ lines
- Composition over inheritance - Use ViewBuilder and modifiers
- Preview-driven development - Always include #Preview
View Structure Pattern
struct FeatureView: View {
// MARK: - State
@State private var isLoading = false
// MARK: - Environment
@Environment(\.dismiss) private var dismiss
// MARK: - Body
var body: some View {
content
.navigationTitle("Feature")
.toolbar { toolbarContent }
}
// MARK: - Subviews
@ViewBuilder
private var content: some View {
if isLoading {
ProgressView()
} else {
mainContent
}
}
}
Custom Modifiers
struct CardModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(.regularMaterial)
.clipShape(RoundedRectangle(cornerRadius: 12))
.shadow(radius: 4)
}
}
extension View {
func cardStyle() -> some View {
modifier(CardModifier())
}
}
Responsive Layouts
struct AdaptiveGrid: View {
@Environment(\.horizontalSizeClass) var sizeClass
var columns: [GridItem] {
Array(repeating: GridItem(.flexible(), spacing: 16),
count: sizeClass == .compact ? 2 : 4)
}
var body: some View {
LazyVGrid(columns: columns, spacing: 16) {
ForEach(items) { ItemCard(item: $0) }
}
}
}
Best Practices
- Use
@ViewBuilderfor conditional content - Prefer
some Viewreturn type - Extract magic numbers to constants
- Use semantic colors:
.primary,.secondary - Add
.accessibilityLabel()to icons
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?