improvement(ui): improved skills UI, validation, and permissions

[waleedlatif1]

Summary

• improved skills UI
• improved skills modal validation
• improved permissions UX, just hide skills if they are unavailable

Type of Change

• New feature

Testing

tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Feb 6, 2026 9:11pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances the skills feature with improved UI, validation, and permission handling. The main changes include:

• Improved validation UX — Replaced single error message with field-specific inline errors in the skill creation modal, clearing errors as users type for better feedback
• Enhanced skills UI — Redesigned skill display from compact chips to card-based layout with better visual hierarchy, larger icons, and improved spacing
• Permission-based visibility — Skills input now respects disableSkills permission flag, hiding the entire input when unavailable instead of disabling it
• Skill name hydration — Added logic to display current skill names in workflow blocks with graceful fallback for deleted skills (live data → stored name → skillId)
• Documentation improvements — Expanded skills documentation with best practices, common use cases, recommended structure, and visual examples
• Icon refinement — Updated AgentSkillsIcon to smaller dimensions with cleaner rendering

The changes follow established patterns for validation, permissions, and data hydration. Minor style improvements suggested for type safety and theme consistency.

Confidence Score: 4/5

• This PR is safe to merge with minor style improvements recommended
• The implementation follows established patterns and includes good defensive coding (fallback handling for deleted skills, field-specific validation). The permission-based hiding approach is cleaner than disabling. However, there are minor type safety issues (any type in workflow-block.tsx) and hardcoded color values that should use CSS variables for better theme consistency. These are non-blocking style improvements.
• Pay attention to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx for the type safety improvement

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/skills/components/skill-modal.tsx	Improved validation with field-specific errors and better UX with inline error messages
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx	Improved UI with card-based layout for skills, better visual hierarchy
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts	Added permissions check to hide skill-input when skills are disabled
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	Added skill name hydration logic with fallback handling for deleted skills

Sequence Diagram

sequenceDiagram
    participant User
    participant SkillModal
    participant SkillInput
    participant useEditorSubblockLayout
    participant WorkflowBlock
    participant PermissionConfig
    participant SkillsAPI

    Note over User,SkillsAPI: Skill Creation/Edit Flow
    User->>SkillModal: Opens modal to create/edit skill
    SkillModal->>SkillModal: Validates name (kebab-case, max 64 chars)
    SkillModal->>SkillModal: Validates description (required)
    SkillModal->>SkillModal: Validates content (required)
    alt Validation Fails
        SkillModal->>User: Shows field-specific error messages
    else Validation Succeeds
        SkillModal->>SkillsAPI: createSkill or updateSkill mutation
        SkillsAPI-->>SkillModal: Success/Error response
        SkillModal->>User: Closes modal or shows general error
    end

    Note over User,SkillsAPI: Permission Check Flow
    User->>useEditorSubblockLayout: Opens editor panel
    useEditorSubblockLayout->>PermissionConfig: Check disableSkills flag
    alt Skills Disabled
        useEditorSubblockLayout->>User: Hides skill-input subblock
    else Skills Enabled
        useEditorSubblockLayout->>SkillInput: Renders skill-input component
    end

    Note over User,SkillsAPI: Skill Selection & Display Flow
    User->>SkillInput: Selects skill from dropdown
    SkillInput->>SkillsAPI: Fetch workspace skills
    SkillsAPI-->>SkillInput: Returns skill list
    SkillInput->>SkillInput: Stores {skillId, name} in value
    SkillInput->>User: Displays skill card with name and icon

    Note over User,SkillsAPI: Skill Name Hydration Flow
    User->>WorkflowBlock: Views block in workflow canvas
    WorkflowBlock->>SkillsAPI: Fetch workspace skills
    SkillsAPI-->>WorkflowBlock: Returns fresh skill data
    WorkflowBlock->>WorkflowBlock: Resolves skill names with priority:<br/>1. Fresh data from API<br/>2. Stored name (fallback)<br/>3. skillId (last resort)
    WorkflowBlock->>User: Displays hydrated skill names

Loading

[greptile-apps]

_{4 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}