Experiment

Advanced Filter Builder

Complex query builder with AND/OR logic, custom fields, and shareable filter presets.

Prompt

Create an Advanced Filter Builder for a CRM or data platform. Single page with: - Saved views sidebar with filter counts - Query builder with AND/OR logic toggles - Filter rules with field, operator, and value dropdowns - Nested filter groups (OR within AND) - Add rule / Add group buttons - Results preview table showing matching records Use light mode. Build with React, TypeScript, and Tailwind CSS.

Default ClaudeOpen
Observations
  • Generic gray palette
  • Native select elements
  • Blue accent color
  • Basic nested group styling
  • No typography system
With SkillOpen
Improvements
  • Utility & Function direction
  • Cool slate color foundation
  • Violet accent for logic/intelligence
  • Custom styled dropdowns
  • Monospace for field names and values