A native Vuestic critique worksheet with source-verified light and dark presets, accessible rating labels, textarea validation, a derived average and a saved state that preserves the completed assessment.
Vuestic UI 1.10.3 with Vue 3; Material Icons bundled locally through @quasar/extras 2.1.0. · Implementation reference
02
Vuestic UI Design System Design Reference
Vuestic UI 1.10.3. Preset values are read from the installed color service, and component variables from its CSS. The worksheet retains the default light preset but deliberately overrides --va-font-family to system-ui. Its decorative shapes and surrounding scale are original.
Vuestic UI Design System A Configurable Vue Library with Named Color Presets
A Configurable Vue Library with Named Color Presets
Vuestic registers its shared services through createVuestic. The example uses native components imported from vuestic-ui and the default light color preset. Rating, buttons, progress and the success alert resolve semantic color names through that same service.
The worksheet is a concrete application of those components: it separates three review questions, collects a supporting observation, calculates an average and locks a saved local result. The colored criterion marks and two-column composition are original application design, not additional Vuestic components.
Vuestic UI Design System Distinguish Service Presets from CSS Geometry Variables
Distinguish Service Presets from CSS Geometry Variables
The verified light preset defines primary #154EC1, success #3D9209 and textPrimary #262824. Its dark preset uses different primary, text and surface values rather than merely inverting the light page. The reference table records both presets, while the preview intentionally stays in light mode.
Component geometry is configured through CSS variables such as --va-button-border-radius and --va-form-element-border-radius, both 0.25rem in the installed stylesheet. A color preset and a CSS variable override solve different problems: use the service for semantic roles and the documented variable for supported component geometry.
Vuestic UI Design System Load the Required Icons and State the Font Override
Load the Required Icons and State the Font Override
Vuestic’s default --va-font-family names Source Sans Pro. The example overrides that variable to system-ui instead of silently depending on a font that was never loaded. Native component labels and application prose therefore share an explicit available font stack.
The default rating icons use Material Icons names such as star and star_outline. Their local font stylesheet is imported from @quasar/extras and bundled with its font files. Without that asset, literal icon words can replace the expected star shapes. The icon font is kept separate from the application text-family override.
Vuestic UI Design System Use Zero as an Unanswered State Rather Than a Poor Score
Use Zero as an Unanswered State Rather Than a Poor Score
Each VaRating binds to one criterion’s numeric value. Its max is five and clearable is enabled, so choosing the current score again can return that criterion to zero. The UI says Not rated for zero rather than presenting it as a completed zero-out-of-five judgment.
The average divides by the count of positive ratings. This avoids penalizing unanswered criteria while the worksheet is in progress. Saving still requires all three to be answered, so the final average always represents the complete assessment. Changing a rating immediately updates the completion chip, progress bar and summary.
Save the blank worksheet and inspect both missing-rating and note feedback.
Assign Clarity 4, Hierarchy 3 and Feedback 2; the average becomes 3.0.
Write a concrete observation and save; then use Start again to reset the full worksheet.
Vuestic UI Design System A Useful Observation Needs Meaningful Text and Enough Space
A Useful Observation Needs Meaningful Text and Enough Space
VaTextarea has a visible label, a four-hundred-character limit and a counter. The application checks the trimmed value for at least twenty characters after an attempted save. A string of spaces therefore cannot satisfy the requirement, even though it has a nominal character length.
The textarea enables autosize with a four-row minimum and a twelve-row maximum. That is a functional setting, not just an example prop: without autosize, the minimum-row setting did not yield the intended expanding note area. The repaired version keeps a narrow-screen observation visible while retaining normal scrolling for exceptionally long notes.
Vuestic UI Design System Derive Progress from Completion, Not from the Rating Average
Derive Progress from Completion, Not from the Rating Average
The progress bar measures how many criteria have a positive answer, expressed as rated divided by three times one hundred. The large number beside it measures the quality average. These are different denominators and should not be conflated: three low scores can still produce one hundred percent completion.
The completion sentence states the numerator and denominator directly. The average is labelled Average of rated criteria, and the summary repeats each criterion’s score. Those labels let readers understand the calculation instead of interpreting an unexplained progress bar as an overall quality judgment.
Vuestic UI Design System Lock a Completed Local Assessment Until an Explicit Reset
Lock a Completed Local Assessment Until an Explicit Reset
Save sets attempted first, then checks all ratings and the observation before enabling saved state. The saved flag makes the ratings and textarea readonly and disables the Save button. The success alert states that the assessment was saved locally and nothing was sent.
Start again clears every rating, the note, validation visibility and saved state in one handler. It is deliberately explicit because changing one value after saving would otherwise make the confirmation stale. No backend, account or review recipient is implied by the example.
Vuestic UI Design System Name Each Rating Item with Its Criterion and Value
Name Each Rating Item with Its Criterion and Value
The native VaRating items expose buttons in the accessibility tree. aria-item-label includes the criterion name and the value/max placeholders, producing labels such as Clarity score 4 of 5. That avoids fifteen indistinguishable star controls when three ratings appear on the same page.
The textarea has its own visible label, the progress bar has a completion label, and the saved alert is a status region. Decorative criterion marks are hidden from assistive technology. The local checks clicked actual labelled rating buttons, exercised validation and inspected the final layout at 280px rather than relying only on the presence of ARIA attributes.
Give every repeated rating a criterion-specific item label.
Keep unanswered and readonly states visibly distinct.
Verify the numeric summary after interacting with the actual native controls.
Vuestic UI Design System Include the Plugin, Component CSS and Local Icon Asset
Include the Plugin, Component CSS and Local Icon Asset
The entry registers createVuestic and imports vuestic-ui/css before the original layout stylesheet. App.vue imports every component it uses, so the example does not depend on an undocumented auto-import configuration. The shared font override is applied after the library CSS.
The package command includes @quasar/extras only as a source of the local Material Icons font; it does not register Quasar or mix its components into the worksheet. The complete SFC and stylesheet above can be dropped into the Vite Vue setup below. The generated standalone preview inlines the required assets and does not fetch a remote font.
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar and VaAlert connect to one assessment model.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Verified Vuestic UI 1.10.3 and local Material Icons from @quasar/extras 2.1.0. Both complete source examples are provided; no external font service is needed.
javascript
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
A Prompt for Your Project
Agent Prompt
Use Vuestic UI 1.10.3 to reproduce the design critique worksheet with three native VaRating criteria, VaTextarea, progress, status and save/reset controls. Calculate the average from rated criteria and require all three scores plus the trimmed twenty-character note before saving. Preserve the autosizing textarea so the full critique stays visible, and keep the saved readonly state and reset behavior consistent. Include createVuestic, native CSS and the local icon font. This is a local critique record, not an inspection-batch service.
05
Vuestic UI Design System Sources and Scope
Vuestic UI 1.10.3 using the default light color preset and an explicit system-font override. Original critique questions and artwork. Saved state is local, with no external review submission or persistence across reloads.
